daniel.mt

Hey thanks for response. No problem I lost myself in details. Here is a shorthand of what I'm trying to achieve Expected behaviour: - the viewport hits the end of the horizontal scroller - the top viewport hits the carousel-container - the carousel starts moving The current behaviour: - the carousel starts moving way to early while the user is still on horizontal scroller. Once it reaches the carousel it already jumped to the next box . Please let me know if this makes more sense .

Hello. Hope you're all good. I have a problem where I can't find a solution and I was wondering if I can get an idea. In the previous pen I have an horizontal scroller ( not the same in my current project but something really close to the pen ) followed by a carousel that scrolls one by one on each scroll. This was inspired by this pen: https://codepen.io/GreenSock/pen/rNOebyo. Now the problem: in my pen and the one from the demos the start and end of each box is based on the window innerHeight and I can't figure it out on how I can start it once the user hits the carousel. The main idea -> goes through the horizontal scroller, the centered carousel is pinned, scrolls for like 300vh ( 100 vh = 1 scroll ) and then goes to next section. This isn't the only idea I tried various way of getting the offset().top of the centered carousel to start from there but without any success. Isolated carousel just in case: https://codepen.io/visualbadger/pen/yLbNxYW Thanks in advance and wish you a splendid day. The pen with the carousel and the horizontal scroller:

Figured it out somehow. Ditched out the tween and used a timeline instead , managed to store the progress and send it to timeline. It's messy but it does his job . Here is the final solution for whoever is trying to achieve something similar: https://codepen.io/vesemir/pen/mdEGOGb I'll try to rewrite this mess but for now it works . Thanks a lot for your help.

Brilliant . Apparently this solves part of my problem. Here is final solution: https://codepen.io/vesemir/pen/VwjGKzM One more question if I'm not too annoying. Any idea on how I could update my to / from based on my progress on resize ? Tried something on refresh but this doesn't count my progress and updates it only to the final position. Thanks again for your help. I don't know why I didn't thought on this from the beginning.

Hello . I'm trying to achieve a similar effect of scaling found here: https://codepen.io/GreenSock/pen/wvKwZXG but with some slight changes. I'm trying to scale a position fixed div to another smaller one ( for short scaling the bigTile to smallTile ) . So far so good. The width / height is scaled perfectly and it works like a charm. But when I tried to alter the x/y of the fixed element I encountered various issues like: the positioning with the element is all wrong - the problem can be seen in the codepen, on resize it jumps out, on refresh it's not updated properly. I have the feeling that the way I'm updating x / y ( that works in my solution but not in codepen apparently ) it's all wrong . So the question: it's there any way to hijack those x/y values with the position of the small tile ( top / left ) ?

I thought so . I just hoped that I missed something during my walkthrough through demos and docs. Thanks for clearing this up.

Hi. Is there any way to delay scrolling to a section and wait for the leave animation to finish / the current animation to reverse ? I'm trying to achieve something similar to fullpage with some buttons that will send the user to that clicked section but without going through previous sections / scrubing through other panels ( hope this makes sense ) . So my idea is to set the scrollTo duration to 0 and just jump to that section and let the scrolltrigger wait for the current panel to finish its animation and to let the next panel to start its own.

Hey Zach. Thanks for responding. Yhep. It's perfect. Didn't find this post. Thank you. My final goal is to achieve a similar affect but horizontally ( including changing other divs in sync with the main one and this is a bonus for me as you already solved it ) . Although I don't quite understand how progress affects each item and how you make that centred item scaled. I'll try to add some breakpoints, go through documentation thoroughly and maybe it will click at some point. Thanks a lot for your help and response.

Hi everyone, I'm really newbie with gsap and I'm more than sure that I did some awful mistakes. Sorry in Advance if this was already asked / the answer is in documentation but I really couldn't find it and I managed to spend 8h trying to fix this ( deleting and remade-ing ) . So for short I found some really great examples and this one caught my eye: This one more precisely: https://codepen.io/osublake/pen/YrXdGZ -- I started to analyse it and I tried initially to migrate from gsap 2 to gsap 3 but unfortunately I managed to fail miserably. Afterwards I tried to recreate it from scratch to understand how it works where I failed but still ... I managed to get stuck. The main problem: I don't understand why in the demo this line: var animation = new TimelineMax({ repeat: -1, paused: true }) .add(baseTl.tweenFromTo(1, 2)) mainly starts the timeline in a great position and in my situation: _.animation = gsap.timeline({repeat: -1, paused: true}).add(_.timeline.tweenFromTo(1, 2)); it just stays in place. I also tried to reproduce Blake's example in localhost and it does the same thing ( after changing everything to gsap.timeline and gsap.to ). I'm thinking that I miss something or it's a bad thing on putting the timeline in 'this' object. In the end I just want to properly select the center object/objects and increase the scale . And I'm trying to implement a progressive scaling on each item like: 0.6-0.8-1-0.8-0.6