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!