Share Posted November 28, 2022 Hello Dear Forum, I am trying to do a certain operation. I am extending a codepen of https://codepen.io/shshaw witch allows you to scrub video with scrollTrigger to achive effect of "going" thru timeline via scroll. Goal: I added data-attributes to each slide with value that in my mind represents a second of main video to display text and I want to force the particular slide text to display in given second. (If the video is in 4th second display slide1 text and so on.) Question: How can I add simple tween .from() to text and place it in particular place of videoTimeline I know that have values like `progress` and `videoDuration` available in`onUpdate` callback of videoTimeline but i am not so sure how can i use them. Should I create separate timeline just for text with a duration of it coresponding to video timeline ? Codepen icnluded Cheers See the Pen zYaLvzr by dzunik91 (@dzunik91) on CodePen Link to comment Share on other sites More sharing options...
Solution Solution Share Posted November 28, 2022 Hi, This is not exactly a super simple result and unfortunately we don't have time to create custom solutions for our users. I was able to whip this simple example based on your codepen (thanks for the reduced codepen, we really love those around here 💚) See the Pen vYraJjP by GreenSock (@GreenSock) on CodePen Hopefully this is enough to get you started. Let us know if you have more questions. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Author Share Posted November 28, 2022 Dear @Rodrigo thank you so much in my mind I was close to that solution that position on timeline is a key here but I was not able to connect right dots. Thank you so much 1 Link to comment Share on other sites More sharing options...
Author Share Posted December 2, 2022 Dear Forum, in above example it work like charm because we are calling a text animation tween on exact position that we want on main timeline. But is there a way to still position tween on exact position but add a scrub to it ? so the text will fade as user scroll ? Full controll. Should text have another timeline that has same length as main videotimeline ? Is this a right thinking ? Cheers on firday. Link to comment Share on other sites More sharing options...
Author Share Posted December 2, 2022 I created sample code pen to visualize: See the Pen rNKqwbB by dzunik91 (@dzunik91) on CodePen So figured it out that i can use .add() on main timeline to apply text enter on particular position on main videoTimeline but I want to make sure that my Text section hits top of viewport in precise second to sync video and text. What I am missing here ? Question 2: why pinned element is hidding under the outro sections ? why its not getting unpined ? Link to comment Share on other sites More sharing options...
Author Share Posted December 6, 2022 Hello, can i just have an info IF effect that i want to achive is even possible ? Cheers Link to comment Share on other sites More sharing options...
Share Posted December 6, 2022 Hey there! I'm a little confused by this, so apologies if I miss the mark. In Rodrigo's pen the slide text is already positioned at a specific point on the timeline and being scrubbed. So it is already, technically, fading as the user scrolls. On 12/2/2022 at 2:18 PM, junik91 said: But is there a way to still position tween on exact position but add a scrub to it ? so the text will fade as user scroll ? In your example your text is no longer absolutely positioned. It's relatively positioned, so as the user scrolls down the page they manually scroll down past the text. Maybe this is what you mean by 'fade as user scroll'? You want the text to fade as it hits a certain point on the timeline, but also be physically scrolled onto the screen at that point too? If so, there are now two different things going on here - the text fade which is linked to a position on the timeline and the physical position of the text which is not anything to do with the timeline. That's to do with the spacing of the elements themselves on the page. If you want your text to hit the top of the viewport and fade at a specific time you'll have to position it physically at a certain distance down the page as well as positioning the fade animation on the timeline at a certain point. On 12/2/2022 at 5:29 PM, junik91 said: I want to make sure that my Text section hits top of viewport in precise second to sync video and text. What I am missing here ? Maybe this simplified demo will help? See the Pen XWYOJEv?editors=1001 by GreenSock (@GreenSock) on CodePen 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