Toggle navigation
Sign Up
Log In
Explore
Works
Folders
Tools
Collections
Artists
Groups
Groups
Topics
Tasks
Tasks
Jobs
Teams
Jobs
Recommendation
More Effects...
JS
TweenMax.set(yellowFish1, {x: '-1000', transformOrigin: 'center, center'}); TweenMax.set(yellowFish2, {x: '-900', transformOrigin: 'center, center'}); TweenMax.set(yellowFish3, {x: '-1000', transformOrigin: 'center, center'}); TweenMax.set(bigRedFish, {x: '+=650', transformOrigin: 'center, center'}); TweenMax.set(smallRedFish, {x: '+=400', transformOrigin: 'center, center'}); TweenMax.set(blueFish1, {x: '+=800'}); TweenMax.set(blueFish2, {x: '+=800'}); TweenMax.set(blueFish3, {x: '+=800'}); function moveFish(fish, step, stepTime, stepNum, deg, direction) { var sign = (direction === 'left') ? '-=' : '+='; var degAdjustment = (direction === 'left') ? 0 : 180; var tl = new TimelineMax({repeat: -1}); for(var i = 1; i <= stepNum; i++) { if(i % 2 === 0) { tl.to(fish, stepTime, {x:sign + step, skewY: degAdjustment - deg + 'deg', ease: Power0.easeNone}); } else { tl.to(fish, stepTime, {x: sign + step, skewY: degAdjustment + deg + 'deg', ease: Power0.easeNone}); } } } function moveBubble(bubble, step, stepTime, stepNum, deg) { var tl = new TimelineMax({repeat: -1}); for(var i = 1; i <= stepNum; i++) { tl.to(bubble, stepTime, {y: '-=' + step, x:'+=15', ease: Power0.easeNone}); } } function moveBubbles() { for(var i = 1; i <= 12; i++) { var bubble = document.getElementById('bubble' + i); moveBubble(bubble, 75, 1, 10); } } function moveFishes() { moveFish(yellowFish1, 100, 0.75, 15, 2, 'right'); moveFish(yellowFish2, 75, 0.5, 20, 2, 'right'); moveFish(yellowFish3, 50, 0.3, 25, 2, 'right'); moveFish(bigRedFish, 100, 1, 15, 2, 'left'); moveFish(smallRedFish, 75, 0.75, 15, 2, 'left'); moveFish(blueFish1, 150, 1, 10, 3, 'left'); moveFish(blueFish2, 150, 1, 10, 3, 'left'); moveFish(blueFish3, 150, 1, 10, 3, 'left'); } function moveFins() { var tl = new TimelineMax({repeat: -1, yoyo: true}); tl.to('.fin', 1, {skewX: '30deg'}); } function animatePlants() { var tl = new TimelineMax({repeat: -1, yoyo: true}); tl.set(rightPlant, {skewX: '-20deg', transformOrigin: '0, 100%'}) .set(leftPlant, {skewX: '-20deg', transformOrigin: '0, 100%'}) .to(rightPlant, 3, {skewX: '20deg', ease: Power0.easeNone}) .to(leftPlant, 3, {skewX: '20deg', ease: Power0.easeNone}, 0) .to(centerPlant, 3, {opacity:0.7}, 0); } var master = new TimelineMax(); master.add(moveFishes) .add(moveFins) .add(moveBubbles) .add(animatePlants);
CSS
.container { height: 0; padding-top: 70.7%; position: relative; } svg { height: 100; width: 100%; position: absolute; left: 0; top: 0; }
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