pattwala

@GreenSock Appreciate the follow up. I slowed down a bit to read the post you shared which was a helpful reference. Earlier, it was "messed up" because of of CSS properties that needed to be removed. I did that and updated it to use yPercent and it's working perfectly. Thank you again!

Hi @elegantseagulls -- that seems to do the trick! I'd thrown that transform in there in an attempt to solve this issue earlier on when I was troubleshooting and must have forgotten to remove it. Thank you for taking the time to help debug my code! @GreenSock -- Thanks for your note as well. I'll keep it in mind for the next time I jump here for support, to create a minimal demo. As for changing to yPercent: -100 from y: "-100%", that really messed things up for me. I suspect I would need to change a few other things in order to make that work as intended.

Hi again, Firstly, just want to thank @elegantseagulls and @Trapti for pointing me in the right direction to get me started. Your help was greatly appreciated. My site is 99% done, but I've got a glitch happening is iOS Safari that I'm having trouble solving. It happens at the very end of the timeline, so you would need to scroll to the end of the page to see it happen -- the issue: the timeline animation jumps at the end, probably due to iOS Safari's rubber-band effect, and the screen momentarily goes blank. Here's a video of the issue that's happening here: https://www.dropbox.com/s/02wlgryopxzyxcx/RPReplay_Final1622519647.mp4?dl=0. You will need an iPad to see it happen locally . I've disabled the timeline & scroll trigger on smaller devices (ie. phones). Unfortunately, I'm unable to "inspect" for the issue because I don't have a USB-C to USB-C cable to connect the iPad to my Mac. You can visit the site here: https://homepage4change.github.io/ (in Safari iOS on an iPad) Here's the timeline registration block: //$ and $$ -- Query selector shorthands const $ = document.querySelector.bind(document); const $$ = document.querySelectorAll.bind(document); const app = $("#app"); // #app is the main container for the timeline const slates = $$('.slate'); // first and last <section> elements const cards = $$('.card'); // all the <section> dom elements between the slates tl = gsap.timeline({ // Attach it to the scroll scrollTrigger: { trigger: app, pin: true, start: "top top", end: () => `+=${app.offsetHeight * (cards.length/2 + slates.length/2)}`, scrub: 0.3, invalidateOnRefresh: true, onRefresh: self => tl.progress(self.progress) } }); and here's the timeline setup: // Animation duration const d = 1; //Move the first two cards into the center position tl.fromTo('.card:nth-child(2)', {y:"100%"},{y:0,duration: d, ease: 'linear'}); tl.fromTo('.card:nth-child(2) .container', {y:"-100%"},{y:0,duration: d, ease: 'linear'},"-="+d); tl.fromTo('.card:nth-child(2) .nav-element',{y:-1*innerHeight},{y:0,duration: d, ease: 'linear'},"-="+d); tl.fromTo('.card:nth-child(3)', {y:"-100%"}, {y:0,duration: d, ease: 'linear'},"-="+d); tl.fromTo('.card:nth-child(3) .container', {y:"100%"}, {y:0,duration: d, ease: 'linear'}, "-="+d); tl.fromTo('.card:nth-child(3) .nav-element',{y:innerHeight},{y:0,duration: d, ease: 'linear'},"-="+d); //Hide the hero tl.to('#hero', {y:"100%",duration: 0, ease: 'linear'}); //Animate all the cards for(let i = 1; i < cards.length-2; i+=2) { //target //from //to //duration //delay tl.fromTo('.card:nth-child('+(i+1)+')', {y:0}, {y:"-100%",duration: d, ease: 'linear'}); tl.fromTo('.card:nth-child('+(i+1)+') .container', {y:0}, {y:"100%",duration: d, ease: 'linear'},"-="+d); if($('.card:nth-child('+(i+1)+') .nav-element')) { tl.fromTo('.card:nth-child('+(i+1)+') .nav-element', {y:0},{y:innerHeight,duration: d, ease: 'linear'},"-="+d); } tl.fromTo('.card:nth-child('+(i+3)+')', {y:"100%"}, {y:0, duration: d, ease: 'linear'}, "-="+d); tl.fromTo('.card:nth-child('+(i+3)+') .container', {y:"-100%"}, {y:0, duration: d, ease: 'linear'},"-="+d); if($('.card:nth-child('+(i+3)+') .nav-element')) { tl.fromTo('.card:nth-child('+(i+3)+') .nav-element', {y:-1*innerHeight},{y:0, duration: d, ease: 'linear'},"-="+d); } tl.fromTo('.card:nth-child('+(i+2)+')', {y:0}, {y:"100%",duration: d, ease: 'linear'},"-="+d); tl.fromTo('.card:nth-child('+(i+2)+') .container', {y:0}, {y:"-100%",duration: d, ease: 'linear'}, "-="+d); if($('.card:nth-child('+(i+2)+') .nav-element')) { tl.fromTo('.card:nth-child('+(i+2)+') .nav-element', {y:0},{y:-1*innerHeight,duration: d, ease: 'linear'},"-="+d); } tl.fromTo('.card:nth-child('+(i+4)+')', {y:"-100%"}, {y:0, duration: d, ease: 'linear'},"-="+d); tl.fromTo('.card:nth-child('+(i+4)+') .container', {y:"100%"}, {y:0, duration: d, ease: 'linear'},"-="+d); if($('.card:nth-child('+(i+4)+') .nav-element')) { tl.fromTo('.card:nth-child('+(i+4)+') .nav-element', {y:innerHeight}, {y:0, duration: d, ease: 'linear'},"-="+d); } } //Move the last two cards off stage to reveal the final section tl.fromTo('.card:nth-child('+(cards.length)+')', {y:0},{y:"-100%",duration: d, ease: 'linear'}); tl.fromTo('.card:nth-child('+(cards.length)+') .container', {y:0},{ y:"100%", duration: d, ease: 'linear'},"-="+d); if($('.card:nth-child('+(cards.length)+') .nav-element')) { tl.fromTo('.card:nth-child('+(cards.length)+') .nav-element', {y:0}, {y:innerHeight,duration: d, ease: 'linear'},"-="+d); } tl.fromTo('.card:nth-child('+(cards.length+1)+')', {y:0}, {y:"100%",duration: d, ease: 'linear'},"-="+d); tl.fromTo('.card:nth-child('+(cards.length+1)+') .container', {y:0}, {y:"-100%",duration: d, ease: 'linear'}, "-="+d); if($('.card:nth-child('+(cards.length+1)+') .nav-element')) { tl.fromTo('.card:nth-child('+(cards.length+1)+') .nav-element', {y:0}, {y:-1*innerHeight, duration: d, ease: 'linear'},"-="+d); } tl.totalProgress(progress || 0); Thanks again for any help you can provide! Pramesh

Hi Greensock community, I don't use GSAP nearly as much as I'd like to and each time I start a project using it I feel like I'm having to relearn it! So, having said that I'm trying to recreate an effect very similar to the one found on this website: http://fillet.com.br/ In the example noted above, it's got a 3 column layout where the columns appear to scroll in alternating directions. And, the contents of each container appear to remain pinned while the container itself appears to scroll naturally. Really appreciate any help you can provide to get me on the right path as I'm super stumped! Pramesh

That's perfect! Thank you!

Hi, Hoping someone can help me out with this. I'd like it so that the splitText is transformed onto the path before the animation begins rather than all the text animating in from one point on the path. Is that possible? This is how I'd like the animation to appear at start: