
WebgenStudio
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
ScrollTrigger Demos
Downloads
Posts posted by WebgenStudio
-
-
Hello, I'm new to GSAP and wanted a little bit of help with one of my projects. I'm trying to recreate the text animations in this codepen . There are seven different text animations in this codepen. If someone can help me by just recreating only one of the animations as I cant quite grasp how to perfectly time keyframes with staggered animations.
Here is one of my trials for the animation called "revolveScale" in the codepen or also tagged with class "one":
var char='.char';
var duration=5;
var tl=gsap.timeline();
tl.fromTo(char,{x:-150,y:-50,rotation:-180,scale:3,opacity:0},{stagger:{amount:duration*0.6},x:20,y:20,rotation:30,scale:0.3,ease:'none'})
.to(char,{stagger:{amount:duration},opacity:1,ease:'none'},"<")
.to(char,{x:0,y:0,stagger:{amount:duration*0.4},scale:1,rotation:0,ease:'none',delay:duration/char.length},`<+${(duration*0.6)}`);
Recreate CSS Text Keyframe animation in GSAP with TextSplit Plugin
in GSAP
Posted
Wow! You make it look so easy! (Or I’m just dumb.. lol).
Thanks a lot really . I was getting confused on playing the tweens in exactly the right times but your first solution clarified for me that we need to play the second tween right after the first character in the first tween not the whole tween. I couldn’t be more grateful for the fast response and you actually taking your time to give me different approaches on how to solve it.
Again, much appreciated!