Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
$(function() { tweenA = new TimelineMax () .add([ TweenMax.fromTo("#sun-burst", 3, { y: "0", scale: 1.5, transformOrigin:"50% 50%" }, { y: "-=50", scale: 1, ease: Linear.easeNone }), TweenMax.fromTo("#cloud-1", 3, { y: 0, scale: 1.2, transformOrigin:"50% 50%" }, { y: "+=60", ease: Linear.easeNone }), TweenMax.fromTo("#cloud-2", 3, { y: 0, scale: 1.1, transformOrigin:"50% 50%" }, { y: "+=40", ease: Linear.easeNone }), TweenMax.fromTo("#mountain-1", 3, { y: 0, scale: 1 }, { y: "-=40", ease: Linear.easeNone }), TweenMax.fromTo("#mountain-2", 3, { y: 0, scale: 1 }, { y: "-=20", ease: Linear.easeNone }), TweenMax.fromTo("#mountain-3", 3, { y: 0, scale: 1, transformOrigin:"50% 50%" }, { ease: Linear.easeNone }), TweenMax.fromTo("#mountain-4", 3, { y: 0, scale: 1, transformOrigin:"50% 50%" }, { y: "+=20", ease: Linear.easeNone }), TweenMax.fromTo("#mountain-5", 3, { y: 0, scale: 1, transformOrigin:"50% 50%" }, { y: "+=40", ease: Linear.easeNone }), TweenMax.fromTo("#mountain-6", 3, { y: 0, scale: 1, transformOrigin:"50% 50%" }, { y: "+=50", ease: Linear.easeNone }), TweenMax.fromTo("#mountain-7", 3, { y: 0, scale: 1, transformOrigin:"50% 50%" }, { y: "+=60", ease: Linear.easeNone }), TweenMax.fromTo("#mountain-8", 3, { y: 0, scale: 1, transformOrigin:"50% 50%" }, { y: "+=70", ease: Linear.easeNone }), TweenMax.fromTo("#mountain-9", 3, { y: 0, scale: 1, transformOrigin:"50% 50%" }, { y: "+=80", ease: Linear.easeNone }), TweenMax.fromTo("#mountain-10", 3, { y: 0, scale: 1, transformOrigin:"50% 50%" }, { y: "+=90", ease: Linear.easeNone }), TweenMax.fromTo("#mountain-11", 3, { y: 0, scale: 1, transformOrigin:"50% 50%" }, { y: "+=100", ease: Linear.easeNone }) ]); });
CSS
.if-landscape { background: #dcdcd2; position: relative; width: 100%; height: 100vh; overflow: hidden; } .scene-1 { height: 100vh; position: relative; min-width: 100%; margin: auto; overflow: hidden; } svg#scene-1 { position: absolute; width: auto; min-height: 100vh; top: 0; bottom: 0; right: 0; left: 0; margin: auto; min-width: 100%; } .woods-transition { height: 100vh; }
HTML
Join Effecthub.com
Working with Global Gaming Artists and Developers!
Login
Sign Up
Or Login with Your Email Address:
Email
Password
Remember
Or Sign Up with Your Email Address:
Your Email
This field must contain a valid email
Set Password
Password should be at least 1 character
Stay informed via email