CssRulePlugin, Keyframe Conversion, Repeat and Delay?

[Oli28 3 Likes (Newbie)]

Hi,

 

Extremely new to GSAP etc, and I only found myself here by accident after weeks of trying to find something JS that would speak to pseudo elements. So hooray!! 

 

My problem is I can't seem to figure out how to get my function to repeat and I'm not sure if I've quite nailed the conversion. I've converted from a keyframes animation and it seems to be working okay, however it only does it once and then stops. I've looked through a variety of the instructions and forum questions on here to get to where I have, but each one doesn't seem to quite gel to my situation. 

 

So basically my keyframes were: 

@keyframes hello {

0% {

top: 100%;

}

33%,

100% {

top: -50%;

}

}

And my selector:

.world::before {

animation: hello 3s 0.4s ease-in-out infinite;

}

So all simple stuff. To convert this, I have this GSAP so far:

gsap.registerPlugin(CSSRulePlugin);

 

var rule = CSSRulePlugin.getRule(".world::before");

 

gsap.to(rule, 0.3, { cssRule: { top: "100%" }, ease: Power4.easeInOut });

gsap.to(rule, 0.7, { cssRule: { top: "-50%" }, ease: Power4.easeInOut });

 

So everything's talking to each other, but I can't get the GSAP function/rule to do the "infinite" part of the original animation. And again I'm not sure if I've nailed the timings based on the percentages in the keyframes. And of course the 0.4s delay, I'm not sure where to put that either.

 

I've created a code pen with the usual bits to try and illustrate, if that helps at all.

 

Thank you very very much for any help!

 

 

See the Pen vYgOaJe by Oli28 (@Oli28) on CodePen

[PointC 14,465 Likes (Superhero)]

Hi @Oli28

 

Welcome to the forum.

 

I'm not quite sure what the final result should look like here, but you'll probably want to put those two tweens on a timeline. Your pen also wasn't loading GSAP and the CSSRule plugin. Here's a fork that is working and should get you started. From here you should be able to adjust the durations and percentages to your liking.

 

See the Pen 9060999ec705edea2807b824ddb6cf2d by PointC (@PointC) on CodePen

 

If you're just getting started with GSAP, I'd recommend:

 

 

Happy tweening and welcome aboard.

 

[akapowl 5,482 Likes (Superhero)]

4 minutes ago, PointC said:

I'm not quite sure what the final result should look like here, but you'll probably want to put those two tweens on a timeline.

 

...or if this is all there is to your animation, use a simple .fromTo-tween if you want it to look like in your demo.

 

See the Pen f89f13e999c3e031d416ab73aa30e30f by akapowl (@akapowl) on CodePen

 

The 'Getting Started' article @PointC linked to is a great starting point to understanding the key aspects of .to(), .from() and .fromTo() tweens and timelines.

 

Welcome to the forums  

 

[Oli28 3 Likes (Newbie)]

Thank you guys! I'd just come back on to say I'd found a solution using TimelineLite and putting a delay and repeat delay in, which pretty much got me to where I needed. I've even gone further and put a random function in for the repeats. The best part about it all, is that I've figured this out in a matter of hours, compared to weeks trawling the internet focused on jQuery. I really wish I'd found GSAP sooner, because its amazing! I can already see loads of uses and solutions for other projects, so I can't wait to get stuck in and learn everything properly. Thank you again!