OSUblake

27 minutes ago, DK7 said:

The animations are supposed to be triggered by scrolling.

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.

55 minutes ago, OSUblake said:

• Animate to the 3rd section
• Animate stuff in inside the 3rd section vertically
• Animate to the 4th section

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.

1. Animate to the 3rd section
2. Animate stuff in inside the 3rd section vertically
3. 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.

See the Pen abqZQpj by GreenSock (@GreenSock) on CodePen

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)

See the Pen BaYzdrx by GreenSock (@GreenSock) on CodePen

Once you do that, we can add in ScrollTrigger.

2 hours ago, corysimmons said:

It seems like refreshing fixes this warning more than half the time, but it still pops up every now and then.

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?

Quote

Element | String - If your ScrollTrigger's trigger/endTrigger element is INSIDE an element that gets pinned by another ScrollTrigger (pretty uncommon), that would cause the start/end positions to be thrown off by however long that pin lasts, so you can set the pinnedContainer to that parent/container element to have ScrollTrigger calculate those offsets accordingly. Again, this is very rarely needed. (added in 3.7.0)

See the Pen abqZmLO by GreenSock (@GreenSock) on CodePen

8 hours ago, paro said:

I am not exactly sure how can i implement ScrollTrigger for this kind stuff.

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.

59 minutes ago, WilliamBay said:

I'm wondering if it's just too many paths (about 75 paths make up each SVG) to be animating, or if there's something that can be done to improve the performance.

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.

See the Pen XWeJXVz by GreenSock (@GreenSock) on CodePen

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 });

See the Pen ZELPxWW by GreenSock (@GreenSock) on CodePen

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.

46 minutes ago, akapowl said:

But now there's a demo with GSAP3 syntax in the article with TweenMax syntax - isn't that more misleading? 🙈

I updated the syntax. Better?

Ok, I updated that demo to the latest version.

4 minutes ago, kaba92 said:

in my codepen its wonking  so not smooth and the ball trajectoire is not a arc.

You can use the MotionPathPlugin.

https://greensock.com/docs/v3/Plugins/MotionPathPlugin

3 minutes ago, kaba92 said:

and its not responsive can i use x: value to percentage in keyframe?

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/

6 hours ago, Cassie said:

That article's using old syntax and I haven't used it myself so not quite sure if it's still part of GSAP3? Maybe someone will chip in, 

What article?