Timeline issue

[artstyle]

hello. 

i have two issues with timeline

1. why is the container setting up to overflow:hidden?

2.how to make move animation to x:400 in the first part of the timeline?  duration: 0.3 doesnt work(example i want to split animation in 3 parts. the container is 300vh. i want to move to x:400 in first 100vh then from 100 to 200 make some elements appear. and from 200 to 300 make the section dissappear. how can i manipulate with animation time inside the timeline?(scrub and pin must be activated))

See the Pen RwaLMry?editors=1100 by aptypkaa (@aptypkaa) on CodePen

[Richard1604]

Hello art style,

welcome to the club I’m sure that you will enjoy it.

 

ive had a look at your animation and you seem to be using scrolltrigger and setting the duration in the timeline so your requirement to use pin and scrub seems to be at odds with setting times as the animation Progress is controlled by scrolling.
i think that you will benefit by looking at some of the training videos under the learning section of the site which has a basic introduction, another on setting the time parameter on tweens and another on scrolltrigger.

there are also lots of demos using codepen.

when you  have a better feel for the fundamentals it will be clearer as to whether you want multiple tweens using from(), to() or fromTo() or scroll trigger is the best way forward and we will be better able to help you.

[ZachSaucier]

Hey artstyle.

 

I'll let @GreenSock address the first question.

 

In regards to the second question, there's a section that explains how timings are divided up with scrub animations in the ScrollTrigger documentation that I highly recommend  If you have remaining questions please ask and we'll do our best to help.

[GreenSock]

Yes, overflow: hidden was added in older versions of ScrollTrigger to protect against collapsing margins but that was removed in more recent versions. Just update to the latest ScrollTrigger and it won't automatically set overflow to hidden anymore