Hey, great tutorial! I wonder if we can have multiple steps in animation (like keyframes)? So elements move from position A to B, then from B to C, and so on.
hi! this worked great for me, but I am having one issue and wondering if it is possible... Basically my origin is a large text logo (origin) with a stroke 0.5 px, but when the text shrinks to the small text logo (target) the stroke needs to increase to 1.5px otherwise it is not visible. Now, it appears that while we can target the scale adjustment (as in the second example) I am unable to have it adjust the stroke, even when I adjust it in the combo class, it is only able to grab the scale details not other styling changes made to that class. Is it possible to have a custom attribute that would allow it to incorporate the changing styling (the stroke width) like the line "tr-scrollflip-scale='true'"? Right now, I have the smaller logo (the target) setting the width so that it at least looks right on the large scale (the origin) but then it is virtually invisible once it shrinks to the target. I was trying to think of another solution like having it adjust based on scroll point (natively within webflow) outside of the gsap transformation but I was not able to figure that out. Thanks for any advice!!!!
Hello, thank you very much for your work! I'm watching your tutorials, everything is clear and understandable. I just couldn't find how to rotate a specific object (not in 3D or 2D, but, for example, rotate by 100°). Does Webflow have this function?
This is great, thanks Timothy. Can these techniques be applied to Lottie animations too? I'm thinking multiple divs containing Lottie animations that come together / merge in a target div on scroll🤔
Can you make a video based on the plugin that webflow introduced for figma? It's amazing but it doesn't work seamlessly. This would be really helpful, thanks!
Hi Timothy, thanks for all your tutorials :) I noticed a problem, when I add the script it disables the overflow:scroll of all my elements... Do you have a solution? Have a great day, Hugo
Tim is the only one who makes step by steps easy to follow and implement.
Looks amazing 😍 🔥
Nice tutorial, thank you for your contribute to the webflow community😁
Thank you Timothy! I admire you.
Yet Another Banger Tutorial... GODDAMN!
wow this is amazing & just what I was looking for - thank you so much!
Love it bro! :D Great work~
Thanks so much! 😄
great video! would it be possible to change the easing of the animation though? 🤔
Hey, great tutorial! I wonder if we can have multiple steps in animation (like keyframes)? So elements move from position A to B, then from B to C, and so on.
Good question! I did a multi-step version in this cloneable.
www.timothyricks.com/resources/multi-step-gsap-flip-scrolltrigger
@@timothyricks
One more thing though 😅 is this timeline while scrolling in sticky?
you should make a video showing us how the content was created
before jumping into elements and scrolling devices
Wow the best, thanks ! 🙂
hi! this worked great for me, but I am having one issue and wondering if it is possible... Basically my origin is a large text logo (origin) with a stroke 0.5 px, but when the text shrinks to the small text logo (target) the stroke needs to increase to 1.5px otherwise it is not visible. Now, it appears that while we can target the scale adjustment (as in the second example) I am unable to have it adjust the stroke, even when I adjust it in the combo class, it is only able to grab the scale details not other styling changes made to that class. Is it possible to have a custom attribute that would allow it to incorporate the changing styling (the stroke width) like the line "tr-scrollflip-scale='true'"?
Right now, I have the smaller logo (the target) setting the width so that it at least looks right on the large scale (the origin) but then it is virtually invisible once it shrinks to the target. I was trying to think of another solution like having it adjust based on scroll point (natively within webflow) outside of the gsap transformation but I was not able to figure that out. Thanks for any advice!!!!
wow very inspiring
Hello, thank you very much for your work! I'm watching your tutorials, everything is clear and understandable. I just couldn't find how to rotate a specific object (not in 3D or 2D, but, for example, rotate by 100°). Does Webflow have this function?
This is great, thanks Timothy. Can these techniques be applied to Lottie animations too? I'm thinking multiple divs containing Lottie animations that come together / merge in a target div on scroll🤔
Thank 👍
Thanks
Can you make a video based on the plugin that webflow introduced for figma? It's amazing but it doesn't work seamlessly. This would be really helpful, thanks!
Tim, next tutorial idea : make a video on three.js with gsap animations. U don't have a single video on three js.
Very much looking forward for THREE JS
Hi Timothy, thanks for all your tutorials :)
I noticed a problem, when I add the script it disables the overflow:scroll of all my elements...
Do you have a solution?
Have a great day,
Hugo
Hi Hugo, maybe try removing this line from the code. ScrollTrigger.normalizeScroll(true);
@@timothyricks Works perfectly, thank you so much !!
I found adding scrollflip code making the site laggy/stuttering while scroll.
Any solution please?
The same problem, mostly on mobile..
this authors comment helped me: "maybe try removing this line from the code. ScrollTrigger.normalizeScroll(true);"
Same issue here, on mobile and desktop
I could solve this by removing the line "ScrollTrigger.normalizeScroll(true);" Not sure what else could be affected but worked on my end.
Hello I would like to enroll GSAP crash course but I did not see the link. Would you mind to provide me again ?
Sure thing! :) Here it is www.timothyricks.com/resource/gsap-course
@@timothyricks Thank you so much ^ ^