OSUblake

I know, but that's not important right now. Just focus on making the timeline. That's where a lot of new people mess up. They are approaching everything as if it's a scrolling problem, when in reality it's an animation problem. A timeline will work the same regardless of it's hooked up to ScrollTrigger on not. ScrollTrigger will scrub through a timeline just like everything else. Just think of ScrollTrigger as being like GSDevTools that you control with the scroll position. But again, don't focus on the scrolling part right now. If you make a timeline that does what I described below, I guarantee you it will work once you hook it up to ScrollTrigger.

Hi Mantrone, Just from a quick glance at it, I think you might need to make some adjustments to the number 36 I see several times in the code. There are 10 images, so that's where the 36 comes. There are 30 degrees between each image. You'll probably have to figure out a new angle based on the number of images you are using, and adjust the code.

Hi DK7, It's best to think in terms of animations instead of scrolling. ScrollTrigger is just an animation controller, so you need to solve the animation problem before worrying about scrolling or anything else that ScrollTrigger does. You basically described everything you need to do for your timeline. Animate to the 3rd section Animate stuff in inside the 3rd section vertically Animate to the 4th section

Welcome to the forums @jeromebart It's hard to offer any advice without seeing a minimal demo. You can use CodeSandbox for nuxt. https://codesandbox.io/s/gsap-nuxt-starter-r5lkg?file=/pages/index.vue Please only include relevant code that is needed to reproduce the issue.

Hi panamera, You can animate the progress of your timeline like this in some event listeners. A Pen by GreenSock (codepen.io)

Hi code, There are some super simple demos here...

Just ignore the scrolling for now. Please just focus on the animation right now. So do not include scroll listeners, ScrollTrigger, gsap.utils.wrap or anything like that. Just make a timeline that animates the columns. As soon the demo starts, the animation should just run. So add your animations to the timeline here. Just fill in the blanks... let tl = gsap.timeline(); tl.to([rev_left], { // fill this in }, 0); tl.to(center, { // fill this in }, 0) reverse scroll gsap test (codepen.io) Once you do that, we can add in ScrollTrigger.

If you have a CodePen pro account, there is a debug view which will open up the page without the iframe. Another option is to use CodeSandbox, which is more like a real dev environment. And all our trial plugins will work on that site too.

Hi chailandau, It works, but you have multiple triggers nested inside an element you are pinning. Perhaps you are looking for pinnedContainer? ScrollTrigger - multiple (codepen.io)

Look at the code in the first demo you posted. Creating the same thing with ScrollTrigger and GSAP will be pretty much the same thing. Create a timeline that animates all the columns at the same, and then hook it up to ScrollTrigger. Give it shot with ScrollTrigger and a Timeline, and if you get stuck, we'll nudge you in the direction.

If animating that many paths is slow, you'll probably have to switch to faster rendering technique, like using HTML5 Canvas or WebGL.

Welcome to the forums @Chinmay Tiwari To animate the x position, the target should just be camera.position, and section probably isn't a property of the camera position. tl.to( camera.position,{ x: 3.57, // section })

Welcome to the forums @corysimmons Is there any reason you are trying to combine ScrollTrigger and GSDevTools? Those are two competing animation controllers, so I would expect some strange behavior. If I wanted to scrub through a ScrollTrigger animation, I would just set scrub: true on the animation instead of trying to go through GSDevTools.

Hi Paro, Have you checked out ScrollTrigger? https://greensock.com/docs/v3/Plugins/ScrollTrigger

Welcome to the forums @lucasvallenet Here's an example of infinite scrolling, but it's probably not going to work with SmoothScroller due to how the scrolling is animated, so when it goes from bottom to the top, it's going to animate instead of jumping. https://codepen.io/GreenSock/pen/XWeJXVz

Have you tried the helper function that Jack mentioned? https://greensock.com/docs/v3/HelperFunctions#loop You can pass normal timeline vars to the function. horizontalLoop(boxes); horizontalLoop(moreBoxes, { reversed: true }); https://codepen.io/GreenSock/pen/ZELPxWW

Hi Renny, I would suggest ignoring ScrollTrigger for the time being and just focus on the animation. ScrollTrigger is just an animation controller. So animate the images and text in a normal timeline as if there were no scrolling. Once have that looking like you want, all you have to do is hook it up to ScrollTrigger. ?

Just set it to auto. You need to make sure that the CSS you set it with comes after your bootstrap/plugins. https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

Hi Jim, Something is adding scroll-behavior: smooth to your site, which is going to mess with the ScrollToPlugin.

Why don't you start doing something simpler, like forking the horizontal moving demo I made and adding more to it? As I said earlier, using the Observer is going to require custom logic that you are going to have implement yourself. All it does is normalize and group together some common events. How you react to those events is up to you.

I updated the syntax. Better?

Ok, I updated that demo to the latest version.

You can use the MotionPathPlugin. https://greensock.com/docs/v3/Plugins/MotionPathPlugin Percentage based transforms are based on the width/height of the element. It does not work the same as say left: "50%". However, you can use other relative units, like vw.

I'm not seeing any issues, but if performance is a problem, you may want to consider to do a crossfade between a light and dark version of that section instead of animating colors. Animating opacity is known to be more performant than animating colors. https://csstriggers.com/

What article?