IPhone SVG Animated Mockup FREE Download- PSDHarbor

This IPhone SVG Animated Mockup, just like our other resources comes with a million options of customization. However, unlike most of our other projects this one gets a little tricky. Of course it isn’t rocket science however as a prerequisite you would need some knowledge of working with HTML,CSS,SVG tags.

Now let’s break down the Download Kit. The kit comes with two files along with additional support files. To achieve the above effect you’ll have to work with these two file.

STEP 1. The simple bit : Open Up the PSD file. You will be able to see 4 smart objects. Place your App Screens in these smart objects and save the PSD as a PNG with the file name “Screens.png”
Note: This file name is important as it would be referenced in the SVG code. If you do happen to rename the file ensure you reference your file name in the code.
While uploading the SVG onto your website don’t forget to upload the screens.png file to your server and refer the uploaded link in your SVG.

STEP 2. Open up the SVG file. Preferably in a browser ( Except IE and EDGE).

THAT’S IT! YOU ARE DONE!

Now comes the tricky bit, Customization. If you have a fair bit of coding skills this should be a walk in the park. However, the others need not fear. We’ll explain the basic snippets of the code that control the major aspects of the SVG file.

Background Gradient: Find the LinearGradient tag with the id “Background_2_”. Here you have to modify the stop-color hex codes to your desired color matching your Application.

<linearGradient id="Background_2_" gradientUnits="userSpaceOnUse" x1="486.1738" y1="1360.6924" x2="1433.8275" y2="-280.692">
			<stop  offset="0" style="stop-color:#e30018"/>
			<stop  offset="0.356" style="stop-color:#da0027"/>
			<stop  offset="0.9462" style="stop-color:#d50038"/>
			<stop  offset="0.9921" style="stop-color:#cc004a"/>
		</linearGradient>

Quick trick to find hex codes : Open up the PSD file. Make the reference and Hue adjustment layer visible. Modify the hue to match your needs. Next, click on the foreground swatch and use the eye drop tool to pick 4 colors starting from the top right to bottom left at equal distances. Copy paste these Hex codes in the SVG file.

IPhone color: Find the path with the id “Body_1_”. Modify the fill color to your needs.

Shadow color: Exactly similar to the IPhone color. Find the path with the id “Shadow_1_” and modify the fill color to your needs.

Animation Control:

Only touch this part of the code if you know what you are doing.

 <animateTransform attributeName="transform"
    type="translate"
    from="442 -228.96"
    to="-465 237"
    begin="0s"
    dur="6s"
    repeatCount="indefinite" 
	calcMode="paced"
    values="442 -228.96; 139.6 -73.6; 139.6 -73.6; -162.7 81.68; -162.7 81.68; -465 237; -465 237; 442 -228.96; 442 -228.96 "
  />

While most parts of this snippet are self explanatory. Let us understand the logic of “values”. As we have 4 screens the movement of the x axis starts 442 and y axis at -228.96. The total x axis movement from screen 1-4 is 907px similarly the y axis is 465.96px. The two screens add 2 more keyframes at 33% animation and 66% animation. Therefore, if you would like to reduce the animation to 3 screens or 2. You would have to keep the base 442 -228.96 constant with the end points at 66%and 33% respectively.
If it’s still confusing feel free to drop us a mail.

You need not use the SVG as an image you can directly embed/copy paste you SVG code into your HTML body. (as in this blog post)
SVG is not supported in WordPress. Download any of the available SVG plugins for wordpress before using this kit.

Download the Kit from the link below.