Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Xhevat Ziberi

svg css animation with GSAP

Recommended Posts

How can achieve this animation with GSAP. Here is the css code

.element {
-webkit-animation-name: fall, opacity;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 1s;
}

@-webkit-keyframes fall {
0% {
-webkit-transform: translateY(0);
}
100% {
-webkit-transform: translateY(21px);
}
}

@-webkit-keyframes opacity {
0% {
opacity: 0;
}

50% {
opacity: 1;
}

100% {
opacity: 0;
}
}

Here is what I tried but the animation is not very good:

var tlm=new TimelineMax({repeat:-1, delay:delay, repeatDelay:0, yoyo: false, ease: Sine.easeIn });
tlm.from(elem, 1, {y:0, opacity:0 })
.to(elem, 1, {y:10, opacity:1 })
.to(elem, 1, {y:20, opacity:0 });

It animates with steps. Here is the fiddle.

 

Can I make separate function for opacity and translate-y?

Link to comment
Share on other sites

Should be easier to achieve, here is your resulting fiddle.

 

JS:

var cloudDrizzle = document.querySelectorAll('#cloudDrizzle2 .climacon_component-stroke_drizzle');
var duration = 1;
var firstTimeline = createTimeline(cloudDrizzle[0], duration, 0);
var secondTimeline = createTimeline(cloudDrizzle[1], duration, duration * 0.6);
var secondTimeline = createTimeline(cloudDrizzle[2], duration, duration * 1.2);

function createTimeline(target, duration, delay) {
  var timeline = new TimelineMax({ repeat: -1, delay: delay });

  timeline.fromTo(target, duration, {
    opacity: 0
  }, {
   bezier: { values: [{ opacity: 1 }, { opacity: 0 }]},
    ease: Power1.easeIn
  }, 0);

  timeline.to(target, duration, {
    y: 21,
    ease: Power1.easeIn
  }, 0);

  return timeline;
}

Hope this helps.

 

Not very sure if I understand your second question i.e. separate functions for `opacity` and `translateY`. Can you elaborate more on that please?

  • Like 1
Link to comment
Share on other sites

If I understand your goal correctly, you could simplify all that code into 2 lines using the stagger methods: 

TweenMax.staggerTo("svg#cloudDrizzle2 .climacon_component-stroke_drizzle", 1, {y:21, repeat:-1, ease:Power1.easeIn}, 0.6);
TweenMax.staggerFrom("svg#cloudDrizzle2 .climacon_component-stroke_drizzle", 0.5, {opacity:0, repeat:-1, yoyo:true, ease:Linear.easeNone}, 0.6);

Or if you want to stick with your function-based technique, you could do this:

function drizzleFall(elem, delay){
  var tl = new TimelineMax({repeat:-1, delay:delay});
  tl.fromTo(elem, 1, {y:0}, {y:21, ease:Power1.easeIn})
    .fromTo(elem, 0.5, {opacity:0}, {opacity:1, repeat:1, yoyo:true, ease:Linear.easeNone}, 0);
}

Notice I used the position parameter to make sure the 2nd tween starts at "0" (the start of the timeline). If you haven't seen this already, I highly recommend it: http://greensock.com/position-parameter. Once you understand the mechanics of timelines and how you can position things wherever you want, it's a VERY powerful concept and you'll probably feel much more empowered. 

 

Happy tweening!

  • Like 4
Link to comment
Share on other sites

Now that I think about it, @Jack's solution works the best and this situation was a perfect fit for `stagger` methods as he described.

 

I missed that by a mile, how could I do that :shock: didn't even cross my mind  :-P.

  • Like 2
Link to comment
Share on other sites

No worries, Tahir! I was about to post a different response initially too when it dawned on me that the stagger methods would be a great fit and would make things super concise. :)

 

You didn't "miss that by a mile" at all. The nice thing about these forums is that we bring different approaches and perspectives.

  • Like 1
Link to comment
Share on other sites

Thank You very much GreenSock. I used the function that you posted, beacause I use that for multiple elements and I can call them remotely. And it work perfectly, thank You.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×