Jump to content
Search Community

Sync Two timelines

junik91 test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

  • Solution

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!

  • Like 1
Link to comment
Share on other sites

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...