Lovestoned

akapowl ! thanks for your reply...solved my problem...great!

ok what do you say now? https://codepen.io/ersenturgut/pen/ExmLwbd

here is the pen... If I use lottie animation and pin it true .anotherdiv overlaping animation div...you can see .anotherdiv scrolltrigger markers... what is the problem on this scrolling? About scrolltrigger or lottie? thanks...

Ji jack Yes this is what I need exactly. But bars must start from the bottom of the container. And animate like this when scrolling...

I want to make all these bars css margin-top:100% at the beginning and set to margin-top:0 randomly via scrolltrigger... how can I do that? thanks...

do you know is there any way to play animation from zip file...I think there is a way but our lottie code compatible for that? my json file is about 3MB...any idea? I couldn't understand lottie tech yet confused.

OSUblake and Cassie thank you so much for your replies...duration is the point...solved my problem perfectly...I will share complete animation for to help other people... superheroes!!!

Ok Cassie I know...but I want to set my text objects timing...I have 3 text objects...for example; text1 : from 0% to 40% text2 : from 40% to 70% text3 : from 70% to 100% I mean what if my objects timing not equal? I want to learn that. That is why I am asking... thanks for your reply...

one more a little question here is my pen https://codepen.io/ersenturgut/pen/GRmqXjp Why text1 opacity not working correctly? Disappearing fast... Finally I want to make : on the left side my 3d product animation with 3 steps...and on the right side I want to slide some texts about for these 3 steps...Just trying to synchronize right and left side animations... thanks..

@OSUblake How can I use frame parameter? for example; from 17th frame to 27th frame something like that : frame:[17,27] ??? I couldn't find syntax... thank you...

Ok I found solution; gsap.timeline({ scrollTrigger: { scroller:".allsite", trigger: ".s3", start: "top top", end: "150%", scrub: 1, pin: true } }) .to(proxy, { scrollTrigger: { scroller:".allsite", trigger:".s3", start:"top top", end:"100%", scrub:true }, frame: proxy.lastFrame }); I used different end values for timeline and proxy...waiting for to complete scrolltrigger 50% more... thanks all for now...

Cassie If I add this code to timeline, animation playing faster than normal.

Hi OSUblake My problem is solved with your code...Really Superhero! thanks. But I want to ask one more question. I give 100% to end value of scrolltrigger and as you know when animation end my page goes on...Is there any way to tell scroller to wait after animation end? Becauase I will put some texts to my container and want to people read them before they disappear with scroll down... I want to say "Hey scrolltrigger wait 2 seconds after all animation end" thanks...

Cassie https://codepen.io/GreenSock/pen/QWvNOJv this pen is good but it is not scroll based as you know...I couldn't give my animation path url...I don't know why but this animation is ok...no problem...I want to make it with scrolltrigger...reverse and forward animation...

as I said before...code something like this can explain what I want to make... tl.to(".animobject",{ frame: 17 }); tl.to(".textobject",{ top: 0, opacity:1 }); tl.to(".animobject",{ frame: 27 }); ....... there are some objects in my timeline...one of them is my json object made with bodymovin...and I want to add this animation to my timeline... at the beginning I want to animate my object to frame 17...and than my text will apppear..than my object will animate to frame 27...etc... anyway I will find a way to do it...it is always been like this I am sure there is easy way to do it or someone will tell me.