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
GSAP INtermediate Text Animation
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
Middle Out Text Stagger - Webflow
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...
2 Replies
@dmoco site is looking good.
For your SVG, I'd recommend looking up how CSS Selectors work.
In this case, I'd give the entire SVG (everything inside the <svg> tag an id, say
header-svg)
In the GSAP code, you could target:
gsap.to('#header-svg path', { ... }) - this would apply the to animation to each individual <path> inside of the svg with the id.
for the whole animation to jsut be a tween you can really simplify, you wouldn't even need a timeline, just a gsap.to or gsap.from
for your third point, you could try seeing what happens when you make a gsap.to and tween jsut the scale and translateY properties. I'm not 100% sure that will give you the desired result though since the transform origin for each element in probably from the center. I'd have to see.
Usually when I think about animating something from one place to another, I look at using the GSAP FLIP plugin but I'll bet you could get it done here with a simple tween.@Web Bae Thanks for the advice webbae, im going to try impliment what you have mentioned here. I think im going to get my transistion/timeline all in place first as theres some other moving parts to go in to, just stuff within the hero section. and then once thats all done switch out the split text to the svg with CSS selector. The scale with translate Y should defiantly work as ive used that before in an old website! ill let you know how I get on 🙂