Jump to content
Search Community

svg css animation with GSAP

Xhevat Ziberi test
Moderator Tag

Go to solution Solved by GreenSock,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

  • Solution

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

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

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.
×
×
  • Create New...