ThomasDeer

Does anybody have any idea on how i can make the transition between these 2 elements as smooth as possible on both desktop and mobile, I seem to get an instant white overlay rather than a smooth change between them, Happy to play around with any suggestions that can make this work as smooth as possible

Hi @mvaneijgen, Thanks for your insight, The information you provided has managed to help me sort my issue. function pinQuotes() { let elementHeight = quoteHeight; quote_timeline.addLabel("One", 0); quote_timeline.to(".quote-article-1", { y: "-" + elementHeight }, "+=0.5"); quote_timeline.addLabel("Two", "<"); quote_timeline.to(".quote-article-2", { y: "-" + elementHeight }, "+=0.2"); quote_timeline.to(".quote-article-2", { y: "-" + (elementHeight * 2) }, "+=0.2"); quote_timeline.addLabel("Three", "<"); quote_timeline.to(".quote-article-3", { y: "-" + (elementHeight * 2) }, "+=0.2"); quote_timeline.to({}, { duration: '0.5' }); } For anyone interested, This is my Adjusted pinQuotes Function which was what I used to get this working as expected. Thanks again for your assistance. I'm looking forward to using gsap in the future and learning more about this powerful library.

Thanks for the help with my earlier issue, Based on the similar code I have attempted to create a second slider within my site and have become unstuck again, Although similar to my previous slider, This one needs to have variable height as the element's are in a scss Clamp function to improve responsiveness as the images are purely for decoration. Although due to this, I'm having a little issue trying to work out how to make the animation run smoothly. The codepen attached shows my issue. Hopefully, somebody could point me in the correct direction. Also if someone would know how to make my PinQuotes() function a little more versatile, to allow for more quotes to be added or removed with nessercarily adjusting the JS each time, This would be amazing. Thanks, Tom

Hi Everyone, GSAP Newbie here, I'm attempting to build a bit of a slider in GSAP. I've used some trial and error, Documentation and codepen's to help get me to this stage. I'm trying to make it so that if somebody clicks on a school on the left. It will then scroll using gsap to the appropriate slide (which kind of works although very buggy) However, If when you reach the slider element. you click say the last slide (Sixth Form) it carries you to the last slide on the right, as expected, Although if you then try and carry on scrolling from there, It attempts to scroll from the last scroll position on the page. I hope this explanation makes sense. Can anybody offer some guidance or snippets for something that might solve my issue? thanks, Tom