Change scroll trigger to Tl.
@Web Bae
Hi Guys,
I wondered if someone could help me out with this, I am currently working on a personal project, and building the website for this project on webflow. Im so close to completing the site and im trying to add a little something to make my website stand out. Ive been trying to learn some gsap, but to be honest im a little stuck, as I can write basic tweens but when trying to edit existing gsap someone else has wrote I get a little stuck, well very stuck!
Im trying to make some changes to Webbaes "spicy glide cloneable" but cant seem to achieve what im looking for, and it is really stifling my progress to get the site completed so I can concentrate on other areas and growing the brand, so wondered if anyone can take pity on me and help me out with this :p lol.
What I am trying to do is:
1) split svg text instead of text block.
2) have the whole animation a tl. rather than a scrolltriger
3) have the first split text animation a smaller size, and then the second split text animate into a larger text and different position.
I have taken screen shots of my project to explain points (3), so you can see where and what size I would like the text animation to start, and where and size I would like it to finish.
Hopefully this makes sense after looking at Webbaes Spicy slide animation, and then the screenshots of how I want to implement this animation into my own project, and for this to start and finish on my all on .tl rather than .scrolltrigger.
Any advice or help would be honestly amazing.
Thanks!
Dylan
Spicy Glide Clonable:
https://middle-out-text-stagger.webflow.io/
https://webflow.com/made-in-webflow/website/middle-out-text-stagger?ref=made-in-webflow-search&searchValue=webbae
My read link:
https://highso.webflow.io/
https://preview.webflow.com/preview/highso?utm_medium=preview_link&utm_source=designer&utm_content=highso&preview=4b85f9fcebeac6eaa09f950d8130adeb&workflow=preview
Hi Guys,
I wondered if someone could help me out with this, I am currently working on a personal project, and building the website for this project on webflow. Im so close to completing the site and im trying to add a little something to make my website stand out. Ive been trying to learn some gsap, but to be honest im a little stuck, as I can write basic tweens but when trying to edit existing gsap someone else has wrote I get a little stuck, well very stuck!
Im trying to make some changes to Webbaes "spicy glide cloneable" but cant seem to achieve what im looking for, and it is really stifling my progress to get the site completed so I can concentrate on other areas and growing the brand, so wondered if anyone can take pity on me and help me out with this :p lol.
What I am trying to do is:
1) split svg text instead of text block.
2) have the whole animation a tl. rather than a scrolltriger
3) have the first split text animation a smaller size, and then the second split text animate into a larger text and different position.
I have taken screen shots of my project to explain points (3), so you can see where and what size I would like the text animation to start, and where and size I would like it to finish.
Hopefully this makes sense after looking at Webbaes Spicy slide animation, and then the screenshots of how I want to implement this animation into my own project, and for this to start and finish on my all on .tl rather than .scrolltrigger.
Any advice or help would be honestly amazing.
Thanks!
Dylan
Spicy Glide Clonable:
https://middle-out-text-stagger.webflow.io/
https://webflow.com/made-in-webflow/website/middle-out-text-stagger?ref=made-in-webflow-search&searchValue=webbae
My read link:
https://highso.webflow.io/
https://preview.webflow.com/preview/highso?utm_medium=preview_link&utm_source=designer&utm_content=highso&preview=4b85f9fcebeac6eaa09f950d8130adeb&workflow=preview
In this intermediate-level GSAP tutorial we will explore a page load hero section text stagger middle-out animation combined with the GSAP ScrollTrigger plugin. We will have a look at the TextSplit library to automatically create spans for individual character which we will then animate with GSAP. GSAP + @Webflow can work well to create beauti...
Middle Out Text Stagger
In this intermediate-level GSAP tutorial we will explore a page load hero section text stagger middle-out animation combined with the GSAP ScrollTrigger plugin. We will have a look at the TextSplit library to automatically create spans for individual character which we will then animate with GSAP. GSAP + @Webflow can work well to create beauti...
