akapowl

Hello Paolino, welcome to the GSAP forum.
 
The problem you are running into is occuring because you are creating logic issues with your .to() tweens, having multiple instances accessing the same values of the same elements. That is one of the most common ScrollTrigger mistakes btw, as mentioned in the article linked.

You could either 

a) set immediateRender to false on that second tween you've got to prevent conflicting behaviour...
 

See the Pen QWJGVyX by akapowl (@akapowl) on CodePen
 
 
 
...or even better in most cases since it can make your life a lot easier in general;

b) use a timeline, and set the start of the second tween to where you need via the position parameter.
 
I hope this helps clear things up a little.


See the Pen mdQOGVK by akapowl (@akapowl) on CodePen

 

That codepen example uses an approach a bit different logic-wise in the first place.
 
 
Here are some pointers:
you can not have elements with position: fixed inside your smooth-scrolling container
https://greensock.com/docs/v3/Plugins/ScrollSmoother#caveats
  you'll need to set the height of the panels a bit different, than it was set in the original demo; which so far happens in an extra stylesheet loaded via the CSS section of the codepen demo, btw - I just set the min-height to 100vh for the moment
Also it seems you'll have to adjust the logic for the ScrollTriggers a bit.

The ScrollTriggers' end of 'bottom center' won't take the pin-distance of the .purple and .orange elements into account, which is why I manually calculate the STs distance for the two of those here differently than for the others - and instead of using that function onToggle, I add/remove the classes in the individual enter/leave callbacks.

I don't have the time to figure out the ideal approach for you, but this should work like what I understood you wanted to achieve.

Good luck with the project.


See the Pen wvQzVBZ by akapowl (@akapowl) on CodePen

Hello @ashura
 
ScrollTrigger and Observer actually serve different purposes and thus depend on differrent prerequisites. ScrollTrigger for instance relies on native scrolling - so if you're not going to use native scrolling as in your approach, it won't make much sense to use ScrollTrigger (same would go for a smooth-scrolling library like lenis e.g.).
 
I'm not sure I get the whole picture of what it is you're trying to achieve, but if you want something like the example from the thread you linked to work with Obersever only, you could immitate scrolling by translating an element. In the example below, logic-wise I set/tween the progress of a timeline depending on a progress variable I am setting in the onChange of the Observer. The timeline consists of the line-fill for each line and an extra tween on the .text element, moving it up to immitate scrolling, in its duration and position parameter adjusted, so the 'scrolling' will start once the first line is filled, and end before the last line starts filling up.
 
You see Observer is highly versatile, as it gives you just about anything you need, but figuring out the logic for what you want to achieve is in every dev's own hands.

I'm also convinced the logic I implemented here could still be improved, but this is just to give you some idea.
 
I do hope this will help in a way. Happy Observing.
 

See the Pen mdQEzOr by akapowl (@akapowl) on CodePen
 

Hello Alexei, welcome to the GSAP forum.
 
We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations - please read the Forum Guidelines.

One way you could handle animating the re-ordering of the elements on the left, would be to use the FLIP Plugin.

Here is a rather basic example - all the logic around that for achieving what you have in mind would be yours to figure out though.

If you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.
 
Good luck with the project.
 

See the Pen VwVjvgG by akapowl (@akapowl) on CodePen
 

Good job! 👍
 
..also on setting the clip-path (properly now it looks) - right, clip-paths would be one way to go to use custom shapes for 'hiding overflow'.
 
Depending on your needs and especially if things get more complicated, it might be easier in the long run to set everything up in one single SVG, so you don't have to worry about mismatching viewbox spaces e.g.

You could then also add the clipPath to the SVG itself - or alternatively use a mask.
 
Here are some ressources that might be helpful.
 
https://www.motiontricks.com/svg-masks-and-clippaths/
 
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking
 

See the Pen rNQeewB by akapowl (@akapowl) on CodePen
 
 
 
This here is the shape path I use for the clipping / masking for the SVG in the demo above.
 

See the Pen RwqaRrB by akapowl (@akapowl) on CodePen
 
 
 
 

I'm not up to date with PIXI.js, as I have only used earlier versions, but it looks like there were quite some changes with version 7, which you are using here. Here's a migration guide I found via google - looks like loaders have been replaced by something else, so you might have to adapt to that.
 
https://github.com/pixijs/pixijs/wiki/v7-Migration-Guide
 
Edit:
 
As a courtesy, here is a vanilla JS example of how to possibly do it with PIXI 7; you can find a guide for pixi assets here:
 
https://pixijs.io/guides/basics/assets.html
 
And as a sidenote to your GSAP related code: there is no such property as loop on a timeline.
 
https://greensock.com/docs/v3/GSAP/Timeline/repeat()
 
If you want to repeat things infinitely, you'll want to set repeat: -1 and if you want to move things back before repeating, so you create sort of a loop, set yoyo: true.
 
Maybe that can help. Good luck and happy tweening.


See the Pen PoxPKRJ by akapowl (@akapowl) on CodePen
 
 

Hello @jinnyum - welcome to the forum.
 
Maybe you could wrap the .astronaut group in another group and apply the y-transforms to that wrapping group instead of the .astronaut group itself.
 
Something like this maybe?
 

See the Pen bGQbQKj by akapowl (@akapowl) on CodePen

Hey there @Toliy36, welcome to the GSAP forum.
 
your title pretty much has the answer to your question, as first and foremost you'll need to duplicate your arrow.
 
Place the two arrows so that one of them is visible and one of them is placed "off-canvas", and then tween the visible one out of view, while at the same time tweening the not-visible one into view.
 
This thread here has a couple of approaches / demos you could have a look at.
 
Give it a shot yourself and if you get stuck along the way, please post back with a minimal demo of what you have tried - that makes it a lot easier to help thoroughly. Cheers.
 
 
 
 
 

Hello Carl, welcome to the GSAP forum.
 
The main problem is that your CSS is not set up to align the sections beside one another.
 
So you'll want to have another look at the many many examples for fake-horizontal scenarios like that to see how you can get that done - e.g. using flex on your main-container and adjusting everything according to that properly, or alternatively using a display: inline/inline-block setup for your sections.
 
Here is your demo with the main container scaled down to showcase the issue causing your troubles (scroll down a bit to see the problem).
 

See the Pen mdzQmeg by akapowl (@akapowl) on CodePen
 
 
You can find some examples fake-horizontal setups here...
 
https://greensock.com/st-demos/
 
... and this here is one of my demos.
 

See the Pen dyvygmj by akapowl (@akapowl) on CodePen
 
 
 
Edit:
Here is a rather basic Flex-Layout for your convenience - this one might be a bit easier to wrap your head around.
 

See the Pen RweqVKm by akapowl (@akapowl) on CodePen
 
 
 

Hello there Sean.
 
I think you just need to put the position property and z-index on the SVG itself instead of your group #seven.
 
Does this work more like you intended?
 
(I changed the radius of your svg circle from 80 to 75 - and added some infinite yoyo repeat to the tween; latter just for better showcasing)
 

See the Pen wvYQJXb by akapowl (@akapowl) on CodePen

Hey there @grizhlie
 
It sounds like you are actually looking for svgOrigin - there is no such thing as svgCenter, afaik.
 
https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin#h3-svgorigin
 
I'm not entirely sure why, but even if I set that to "200 200" which is supposed to be the center of your SVG, it doesn't align properly - very likely because of the transforms you have on your moon - so you might want to rework that in your SVG Editor.
 
I do recall, that Affinity Designer v1 had an option to flatten transforms on export; so you might want to look for that option in v2, too - maybe it solves that problem for you.
 
Apart from that, setting the svgOrigin to "180 180", appears to be working fine in your case, though.
 
I hope this will help a bit at least. Happy rotating!
 

See the Pen mdzQWyp by akapowl (@akapowl) on CodePen
 
 
 
P.S.: You might also want to consider updating your syntax to the newer v3 syntax (e.g. with regard to durations and eases); although it is still supported, support for the old v2 syntax might get erased in a major future version of GSAP at some point.
 
 
 

Hello @dagda1
 
horizontal: true is for settings, where you are actually using the browser's native horizontal scrolling, which is not the case here.
 
You are only making the site appear to be scrolling horizontally by tweening the content to the side, while actually scrolling vertically.
 
What you'll want to have a look at is the containerAnimation property, that was build for usecases exactly like yours.
 
This is from the ScrollTrigger docs:
 
containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a  See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen
 and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger.   

Use the position parameter as you did before, but now with the stagger parameter before the position parameter removed.
 

See the Pen xxyYQjm by akapowl (@akapowl) on CodePen

Hello Maya.
 
If you have access to a custom CSS file it might be enough to just set the transition on elements you don't want to have transitions applied to back to their default value, via using initial.
 
https://www.w3schools.com/cssref/css3_pr_transition.php
 
If that doesn't work for you, try specifically setting the transition-property to none and transition-duration and transition-delay to 0 or 0s.
 
If that still won't work, as a last resort (although not really recommended) you can do all of the above with !important added at the end.
 
And if you don't want to target every element individually, you can use the wildcard selector * instead.
 
 
If you don't have access to any custom CSS file, or none of the above works for you, you're likely better of asking the people who built Elementor about this.
 
This should at least give you some basic ideas, though.
 

See the Pen JjmrMNy by akapowl (@akapowl) on CodePen
 

Hello there, Nora.
 
containerAnimation is very likely the feature you are looking for. Give it a shot and let us know if you run into any issues along the way.
 
This right here is from the ScrollTrigger docs:
 
containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a  See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen
 and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger. 

Hello  @sawacrow
 
You have a bunch of .fromTo() tweens on that timeline, targetting the same properties of the same element, so you might want to have a look at immediateRender.
 
I set it to false as a default for every tween of your timeline, and it looks way better that way.
 
Alternatively, what you could also do, is to set the timeline to paused initially, and then after you have created it set its progress to 1, then back to 0 and then play it, but that is more of a warkaround, and I would suggest getting familiar with the immediateRender property instead, as it wil come in very handy in lots of scenarios like this.
 
Hope that will clear things up a bit. Happy tweening.
 

See the Pen gOdJJGb by akapowl (@akapowl) on CodePen
 
 
 
Edit:
I only just now saw, you edited your post with another question.
 
With regard to that second question, @Carl's tutorial on staggered staggers and especially the 'follow up' on seemles looping might be of interest for you.
 
For a more in depth dive into GSAP basics, tips and tricks, consider checking out his full courses - he's a great teacher and those are invaluable ressources.
 
https://www.creativecodingclub.com/bundles/creative-coding-club
 
 
 
https://www.snorkl.tv/staggered-staggers-for-enter-and-leave-animation-sequences-gsap-3/
 
 
 
 
https://www.snorkl.tv/greensock-staggers-with-seamless-loops/
 
 

Hello, @bntratox,
 
containerAnimation was made to make what you are trying to do a breeze. Have a look at it in the ScrollTrigger docs.
 
https://greensock.com/docs/v3/Plugins/ScrollTrigger
 
containerAnimation Tween | Timeline - A popular effect is to create horizontally-moving sections that are tied to vertical scrolling but since that horizontal movement isn't a native scroll, a regular ScrollTrigger can't know when, for example, an element comes into view horizontally, so you must tell ScrollTrigger to monitor the container's [horizontal] animation to know when to trigger, like containerAnimation: yourTween. See a  See the Pen 9be5d371346765a8c9a426e8f65f1cea by GreenSock (@GreenSock) on CodePen
 and more information here. Caveats: the container's animation must use a linear ease ( ease: "none"). Also, pinning and snapping aren't available on containerAnimation-based ScrollTriggers. You should avoid animating the trigger element horizontally or if you do, just offset the start/end values according to how far you're animating the trigger.   
 
 
For changing classes on elements, you could either implement logic of your own in the ScrollTrigger's callbacks, like you do with your console.log, or you could see if ScrollTrigger's toggleClass could be helpful for your usecase, too.
 
toggleClass String | Object - Adds/removes a class to an element (or multiple elements) when the ScrollTrigger toggles active/inactive. It can be either of the following: String - The name of the class to add to the trigger element, like toggleClass: "active" Object - To toggle a class for elements other than just the trigger, use the object syntax like toggleClass: {targets: ".my-selector", className: "active"}. The "targets" can be selector text, a direct reference to an element, or an Array of elements. Note that toggleActions don't apply to toggleClass. To have toggle class names in a different way, use the callback functions (onEnter, onLeave, onLeaveBack, and onEnterBack).  

I'm not sure I 100% understand what you want to happen, but as far as I understood things, I'd just create one ScrollTrigger that handles the pinning - as Mitchel already said, since your lottie svg is inside that section, and you are going to pin that section, there is no need to pin the lottie element, too.
 
After that, create your LottieScrollTrigger with pin set to false, and the same trigger and start as the pinning ST, then in the ST you set up for the images to move up, just use the end of the .previous() ScrollTrigger as the start - that way you won't have to make the calculations mentioned by Mitchel, as you can let ScrollTrigger handle that for you.
 
As for using yPercent vs. top - you could probably just keep your calculations as they are and swap out top with y for the tweened property and should be set for better performance already, which all in all would result in something like this. Is taht what you were going for?
 

See the Pen KKxajmY by akapowl (@akapowl) on CodePen

Hey Mitchel.
 
ScrollTriggers associated with timelines must wait 1 tick to do their calculations, so you could e.g. use a delaydCall to get what you need.
 

See the Pen wvEMNLa by akapowl (@akapowl) on CodePen
 
You can find a more thorough explanation by Jack in this recent thread (among others).
 
 

Welcome to the GreenSock forum @sergei86
 
That really sounds more like a canvas question than a GSAP question to me; but you'll probably have to make sure that you clear your canvas before drawing a new image on it. That's also suggested in this answer of an older thread. I hope that will help. Good luck.
 
 

Hello Alex.
 
In timelines the scrollTrigger object does not belong on individual tweens of the timeline, but on the timeline itself; not doing so is one of the most common ScrollTrigger mistakes. You can read more about it in the linked article.
 
Also I would suggest to just use your "-30" as a number instead of a string.
 

See the Pen XWPXPqJ by akapowl (@akapowl) on CodePen

Or you could just set up your SVG a bit different.
 
Like e.g. create 4 circles, two of them sharing the same gradient; and mask each of them with a simple rect (one for each 'corner') - basically the other way around from what you tried. Then you could just tween on the mask rects.
 

See the Pen WNgbLbB by akapowl (@akapowl) on CodePen
 
Alternatively you could also boil this down to creating just two circles with gradients and two masks with the masks being customized paths that would show what you needed.
 
Oh, wait;
You can of course just add multiple rects to a mask - that would reduce the need for cirlces.
 

See the Pen xxabmYP by akapowl (@akapowl) on CodePen
 
 
Edit:
Coming to think about it again; technically for this specific usecase you'd even only need to mask the circle that is topmost on the z-axis - which would be even better, because this way you could avoid those nasty white lines in between the rects, that SVG tends to cause.
 
Okay, I'll stop now😅
 

See the Pen xxabMvv by akapowl (@akapowl) on CodePen
 

It works just fine for me - in your case the effect will be very subtle though - especially on wide screens, because unlike the original demo, you did not set a fixed height to the .container; so instead the height in your example is depending on its contents - and xPercent is related to the height of the target.
 
When you add more content to the footer in your example, you should see it more apparent.
 

See the Pen PodqJrb by akapowl (@akapowl) on CodePen
 

Hello Alexander.
 
The ScrollTrigger docs have an explanation for how to do that - the object option is what you are looking for.
 
https://greensock.com/docs/v3/Plugins/ScrollTrigger
 
toggleClass String | Object - Adds/removes a class to an element (or multiple elements) when the ScrollTrigger toggles active/inactive. It can be either of the following: String - The name of the class to add to the trigger element, like toggleClass: "active" Object - To toggle a class for elements other than just the trigger, use the object syntax like toggleClass: {targets: ".my-selector", className: "active"}. The "targets" can be selector text, a direct reference to an element, or an Array of elements. Note that toggleActions don't apply to toggleClass. To have toggle class names in a different way, use the callback functions (onEnter, onLeave, onLeaveBack, and onEnterBack).

Yeah; quite some time ago I've already explained some basics of GSAP to you and helped re-create that effect in the demo @Rodrigo just now posted, @jollygreen
 
 
That animation is nothing that is set in stone with strict rules - and tinkering, testing and exploring is nothing others can take off of your hands if you want to have it a very specific way.
 
So my suggestion would be to just start from the example we landed on back then and tinker around with each value of each tween, to see what they do until you'll eventually get a feeling for how all of them connected result in the overall visual animation.
 
I did the same just now and came to this demo - it does not perfectly resemble what I think you wanted to achieve, but it should come pretty close.
 
Now you could e.g. compare the values from this new codepen to those we landed on back then and see how they differ from each other.
 
I hope this will help - good luck and happy tinkering.
 

See the Pen dyqoPwq by akapowl (@akapowl) on CodePen