artstyle Posted September 6, 2020 Share Posted September 6, 2020 hey guys. i want to make an effect like in scrollmagic preview i think i can use stagger for that but i cant make the letters go back to white. they all going to red only forward. how can i make them go back to white? i want to highlight only 1 letter at once Link to comment Share on other sites More sharing options...
Richard1604 Posted September 6, 2020 Share Posted September 6, 2020 Hello and welcome to the club. Try reversing your timeline so that it plays backwards or even use the yoyo option. It depends on the context but you might also use scrub if your animation is using scroll trigger. perhaps you could post a codepen example of your animation so that we can see what you are doing. 1 Link to comment Share on other sites More sharing options...
artstyle Posted September 6, 2020 Author Share Posted September 6, 2020 See the Pen poypLJq by aptypkaa (@aptypkaa) on CodePen i want only one letter to change the font-size Link to comment Share on other sites More sharing options...
akapowl Posted September 6, 2020 Share Posted September 6, 2020 Hey @artstyle On 9/7/2020 at 12:57 AM, artstyle said: i want only one letter to change the font-size You could add an extra class to the letter's div and only animate elements with that specific class <div class="test animate">S</div> section4tl2 .to(".animate",{fontSize: "70px", color: "red", stagger: 1}) ; See the Pen 13d5ef34d7cab0f67814e35c967fe098 by akapowl (@akapowl) on CodePen 1 Link to comment Share on other sites More sharing options...
artstyle Posted September 6, 2020 Author Share Posted September 6, 2020 @akapowl i want each letter change font and then change back to normal on scroll and only 1 letter at once Link to comment Share on other sites More sharing options...
akapowl Posted September 6, 2020 Share Posted September 6, 2020 You do not mean staggered like this See the Pen ecadf9b81b9daa255f94108a9860e7cf by akapowl (@akapowl) on CodePen but instead one complete animation after the other, like that See the Pen c3425a3d3ee42cd3a85961dbcf92e9b2 by akapowl (@akapowl) on CodePen Did I understand you correctly this time @artstyle? For the second case, I think, you'd have to use GSAP's utils.toArray functionality and create a 'grow and shrink' timeline for each letter on it's own, add each of these timelines to a larger timeline with an offset equal to the index of each element, and then use that timeline as the animation for your ScrollTrigger. Does that make sense? 1 Link to comment Share on other sites More sharing options...
artstyle Posted September 7, 2020 Author Share Posted September 7, 2020 the thing with subtimelines is something close to what i want but i thought there is an easier way to do this... the point is i have a list of headings which i want to highlight at scroll(only 1 heading at time)... i cant show you my example bcause its on local server but i think you understand Link to comment Share on other sites More sharing options...
akapowl Posted September 7, 2020 Share Posted September 7, 2020 Maybe something like this See the Pen 21b32f0bd91e3795a831604fe95f27f4 by akapowl (@akapowl) on CodePen I got rid of the subTimelines and added an extra ScrollTrigger for each of the elements instead. The Trigger outside of the utils.toArray only just pins the section now and the animations are handled individually inside of the several ScrollTriggers created for the headlines. That's because I thought for your scenario, you might want to get rid of the scrub. I also set things up, so you can only change the totalDuration at the top of the script and everything below that, adjusts accordingly - makes it easier for you to play around with the desired total-duration. Is this closer to what you need @artstyle? 3 Link to comment Share on other sites More sharing options...
artstyle Posted September 9, 2020 Author Share Posted September 9, 2020 @akapowl thanks mate thats very close to what i need. but it looks a bit complicated. i thought there is an easier way to do such animation Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now