[endless gsap slider]

On 1/5/2022 at 1:18 PM, akapowl said:

There is a super awesome helper function in the docs that should also come in very helpful when it comes to creating an infinitely animating loop.

Massive thank you for this function. Wonder how long I would have spent figuring out the horizontal loop 

[Help building the logic of this animation]

@Vishhhh Replied to you via private message  

In case anyone else needs it, I'll just share this stuff:
 

Loom video explaining the code in case you want it.

 

Github repo if you just want to jump straight into it.

If anyone is confused by any aspect of it, let me know. I haven't cleaned anything up, this was just me learning as I hit my head against the coding-wall. Thank GodSAP for this forum, I'd be stuck for a long time otherwise.

I happen to also have a NextJS example of the animation if someone wants it.
 

[Hero Section Logo to Header with static hero image - pin: true misunderstanding?]

24 minutes ago, akapowl said:

You will however probably not want to use 'once: true' in your scenario because apparently having it set will cause the whitespace to remain, if your page reloads at a point further down where the ScrollTrigger shouldn't be active anymore.

Oh, that's interesting. Thanks for that. Not sure if I even have an option to not run it unfortunately, might have to think a bit more about this. But I also don't think that this particular page will have any links that are section-specific. I'm just trying to build the animation logic for a very specific design, just doing it section by section

 

26 minutes ago, akapowl said:

• record the scrollposition of where the ScrollTrigger started
• set the scroll-position of the associated scroller to that position
• disable that ScrollTrigger (which will also remove the pin-spacing)
• set the animation associated with that ScrollTrigger to be completed
• refresh ScrollTrigger so all other ScrollTriggers on your page also get to know about those changes
   
• and (again?) set the ScrollPosition

Thank you, that makes perfect sense. I have a big problem with assuming so I wanted to know for sure that my assumptions make sense. Else today repeats another day with another project 

[Hero Section Logo to Header with static hero image - pin: true misunderstanding?]

@akapowl I don't know how much time you just saved me with this code but a massive thank you for that. 

 

I'll try understanding what the below is doing with some console logs before I make notes on it. Appreciate your help a ton 🙏

 

 onLeave: function (self) {
        let start = self.start;
        self.scroll(self.start);
        self.disable();
        self.animation.progress(1, true);
        ScrollTrigger.refresh();
        // window.scrollTo(0, start);
 }

 

[Hero Section Logo to Header with static hero image - pin: true misunderstanding?]

@akapowl Thanks so much for the lesson!

 

I just stumbled on the same thing. I realised my mistake after about 1 hour, not sure how I kept on missing it. 

 

I'm now exploring how to only run this animation once. I think the only issue remaining for me is the pin-spacing :).

 

Thanks for teaching me. 

[Hero Section Logo to Header with static hero image - pin: true misunderstanding?]

Oh. Of course. 

 

The solution is simpler than i thought.

 

So we animate the logo element. BUT. We create the scroll trigger on the hero section image!!!!!!!!!!!!

 

So instead of:

 

		gsap.from('#logo', {
			duration: 3,
			scale: 10,
			y: innerHeight * 0.8,
			scrollTrigger: {
				trigger: '#logo', // <<--- This is wrong
				start: 'top top',
				end: 'bottom top',
				markers: true,
				pin: true,
				scrub: true
			}
		});

We can do:

 

		gsap.from('#logo', {
			duration: 3,
			scale: 10,
			y: innerHeight * 0.8,
			scrollTrigger: {
				trigger: '#hero-section', // <<--- This is correct
				start: 'top top',
				end: 'bottom top',
				markers: true,
				pin: true,
				scrub: true
			}
		});

 

Working example:

 

See the Pen ZENoEex?editors=1010 by grizhlie (@grizhlie) on CodePen

[Hero Section Logo to Header with static hero image - pin: true misunderstanding?]

Hello forum!

 

I think that I'm simply struggling with some sort of coding pattern I'm not seeing.

 

Desired Effect:

We see a header, large logo on the bottom of the screen and a hero image. As we start scrolling the logo starts animating into its correct header-slot, the hero image remains static and doesn't move. Once the animation is complete, normal scrolling resumed and the hero image starts moving as we scroll. 

 

Recorded a loom video to go along with the codepen example.

 

Problem:

I think I don't understand pin: true along with the effect I'm trying to replicate. 

 

Effectively, I have a gsap.from animation for the header logo. Once that animation is completed, I want to continue scrolling as normal.

 

In the demo, if you remove pin: true, the animation works as expected, but the image is obviously not frozen. So I erroneously assumed that pin: true would just work, but clearly I don't understand it. Most likely because I don't get how pin is impacted by height of a container, or the element itself, or something.

 

Any help/pointers is appreciated.

 

Please and thank you.

 

See the Pen eYarOMW?editors=1011 by grizhlie (@grizhlie) on CodePen

[SvelteKit 2 + Svelte 5 + GSAP - Stuck on ScrollTrigger not working as expected after route change]

10 minutes ago, Rodrigo said:

If possible disable scrolling, wait a full second, allow scrolling again and call the refresh method then.

Not a bad idea 😮! Might do that whilst some loader-screen is infront of the actual content. That would simplify things massively. 

I haven't experienced negative side effects as of yet, by doing it that way, but most of my projects have been relatively simple. I'm sure with any added complexity it would sour the UX in some way.

[SvelteKit 2 + Svelte 5 + GSAP - Stuck on ScrollTrigger not working as expected after route change]

17 hours ago, SteveS said:

@Rafal Potasz Not sure what solution you came up with, but I tried my hand and made something work:
https://github.com/StevenStavrakis/svelte5-gsap-scrollsmoother

Thanks for the example.

Have you tried adding a gsap.to() with a ScrollTrigger effect to the second-page route? I'll try myself tomorrow if you haven't.

[SvelteKit 2 + Svelte 5 + GSAP - Stuck on ScrollTrigger not working as expected after route change]

16 hours ago, SteveS said:

Additionally, if you have to wait 200-300 ms to do anything inside an effect or otherwise state related, it is worth looking at the tick() function.

This was exactly my thinking! But tick() didn't do anything. I think tick relates to rendering. And the GSAP effects were applied to elements already rendered, so tick() didn't achieve anything. Honestly, the simplest solution is to fire ScrollTrigger.refresh()a few times in the first second (works perfectly 100% of the time in another project). 

The way I'm handling it at the moment: I created some functions for animations. When I apply an animation to a page's hero section, I also start refreshing gsap every 200ms. When onEnter is triggered by the hero section, the refreshes stop. Simple as that. Not very elegant, but it's quite accurate so far.

 

Going back to tick(), somehow I have missed this in the past. During this project I found it but it didn't work. Looking at the docs: "It returns a promise that resolves as soon as any pending state changes have been applied to the DOM (or immediately, if there are no pending state changes)." - Gsap doesn't count as a State change to content I guess?? So tick() wouldn't fire? Rendering by state would be relating to something like #key or #eachetc? 

So many questions, so little time this week  

[SvelteKit 2 + Svelte 5 + GSAP - Stuck on ScrollTrigger not working as expected after route change]

@Rodrigo Thanks for the input. I have been testing this for 5 days now and I think I have found the solution. It's not quite perfect yet, but I'm getting there slowly. 

 

A large chunk of a problem was that instead of using +layout.svelte for my smooth-wrapper and smooth-content, I used the +page.svelte component, which was a mistake it seems. My idea was to have a 'fresh start' on route change, but it seems that things broke with that. Wish I just moved the code 3 days earlier, but hey, lesson learned. 

 

Currently I am just killing old smoother effects, getting the new ones and updating ScrollTrigger on a SetTimout until the page's hero is animated in, then it stops. Oddly enough I couldn't create a ScrollTrigger.refresh() that worked as expected without adding timeout, recursion and a way to make it stop. 

 

The scenario is like so: I change routes. My content would be mounted. I would confirm with a few console logs that effects have been applied. ScrollTrigger.getAll() would console log everything. But ScrollTrigger.refresh() wouldn't work until around... 200-300ms down the line. I think without needing complex logic a fix I used in the past was just to run ScrollTrigger.refresh()a few times in the first second of a new route, but I of course had "better ideas" 🤞 this time around...

I will be trying implementing gsap.context(), although I don't fully understand what it does under the hood, so will read up on it a bit.

 

@AdityaBanik That was an early problem I had too!!! Drove me nuts. I have managed to figure out how to get everything I wanted now though:
 

 

• My SvelteKit/Svelte page transitions now work
• My ScrollSmoother is updated with new .effects() on route change
• My ScrollTrigger is now working as expected.

Is ViewTransitions the new method of transitioning between pages? I'd love to use it but the fact it doesn't work on Firefox and Safari bugs me. 

 

Although...

 

 

 

I'm just testing this and making a new project to MAKE SURE my solution does indeed work across projects. It's a bit chunky for my liking so I keep on refactoring so it's more digestible.

 

I'll post a long post about setting it up once I'm done because these technologies are awesome once you get them working together as expected

 

Rafal

P.S. If anyone is curious about what I'm babbling about I have recorded my thought process and code in this loom recording. This is only important before I write up an article on setting things up, once I test more.

[SvelteKit 2 + Svelte 5 + GSAP - Stuck on ScrollTrigger not working as expected after route change]

Update: I think I have figured out everything that works and doesn't work. Am in the process of updating everything before posting a good 'starter' and tips on the above project configuration between Svelte/Kit/GSAP. 

[SvelteKit 2 + Svelte 5 + GSAP - Stuck on ScrollTrigger not working as expected after route change]

Hi all. 

 

No Codepen or Stackblitz yet. In summary, I tried replicating my project on StackBlitz but I'm using Svelte 5 and whatever I did failed in that environment so I gave up for now.

 

My github code.

 

Video of the problem here. 

 

I am trying to create a "Base" environment for a SvelteKit 2 + Svelte 5 + GSAP project.

 

I am trying to use: 

• Svelte transitions for pages
• ScrollSmoother (No effects currently, just {smooth: 2}, but this is likely to change based on a new project)
• ScrollTrigger (Currently just tried a ScrollTrigger with 3 heading elements, but this would of course grow in complexity with any project)

On the initial page load, everything works.

 

The issue arises on route change. The ScrollTrigger elements don't animate anymore. They just sit there in their initial states ('x' positions). If I refresh ScrollTrigger, they just update their 'x' positions, but still don't animate. 

 

In the past this was a very simple thing to solve (I think?). I would just refresh effects on smoother. Or just ScrollTrigger.refresh().I also tried setting a new smoother (perhaps this is the problem, I don't know). I tried killing the smoother and setting a new one too. 

But this does not seem to work for me currently and I'm losing my mind. 

 

I even created buttons to refresh these properties on demand and my ScrollTrigger elements simply don't react to the scroll/scrub. 

 

I'm almost 99% sure it's something extremely simple I don't understand, as per usual, but I can't find it. Been trying for the last 2-3 days.

 

Help...

[Help building the logic of this animation]

Hey @mvaneijgen, sorry for taking so long to get back to you. Overall I have achieved what I wanted. It's not performant on mobile but it doesn't matter as the design for that will be different anyway! 

 

The final result is here: https://animation-tests-rp.netlify.app/ -> EXACTLY what i wanted, massive thank you for sharing some strategies. 

 

I will post a codepen example with a solution shortly (I work with SvelteKit so I just need to covert everything to vanilla js), just stuck on a massive problem that I need to solve first............. 

 

Thanks again 😁

[Help building the logic of this animation]

Alright, I got SOMEWHERE. I replicated everything in codepen.

 

Essentially, I have the effects I want now. My problem is that I'm not sure how to add Flip to a Timeline and also add ScrollTrigger to it. Seems confusing at the moment. I butchered the approach in Codepen 😕 

 

See the Pen WNBjgVg by grizhlie (@grizhlie) on CodePen

 

[Help building the logic of this animation]

@mvaneijgen Absolutely legendary reply, thanks so much. I know exactly what everything means, just need to figure out how to stick it together with GSAP 

I have just (10min ago) run into the issue of having centred images & trying to move them to original positions, so suggesting Flip and duplicating the images seems to be a serious time saver, did not think of that. 

 

Great tip on forgetting the ScrollTrigger for now too, sounds like a good time saver to figure out the main problem.

I'll work on this until I build it, then will post the solution. I hope.

 

[Help building the logic of this animation]

Hi Gang!

 

I'm curious about the logic needed to build this sort of animation. I'm just looking for help in terms of steps needed. If someone has a similar example, I'd love to see it.

 

Link to the website that caught my attention: https://www.mccann.fr/en/

 

Video of the animation I'm looking at: https://www.loom.com/share/b1494a7326644a5ea5845a24b278013a?sid=f71953bb-e96e-49f7-9673-8155b8e7bb2e

 

In order (as we continually scroll downwards)

 

- Nice TextSplit effect -> centred in the pinned section (still learning how pinning works)

- 3 images scroll into the center from the bottom, 1 by 1, overlapping each other and also the text

- The 3 images (and more hidden ones) start animating towards their natural spots in a grid (flex/grid, doesn't matter)

 

I think the thing that confuses me is how do I use ScrollTrigger, within a Timeline, element by element, whilst keeping things pinned, etc. I'll learning these concepts NOW, but an example would be super useful.

 

This SEEMS simple to accomplish, but I just don't know how the syntax side might look like. 

 

Any guidance is appreciated!

 

Cheers  

[ScrollSmoother - Safari Issue related to ScrollSmoother (normalizeScroll)]

On 9/19/2023 at 12:07 PM, stijlmassi said:

 

Can I ask you to try forcing GPU rendition instead of CPU, it seems to have cut down the jitteriness a lot for me on iOS.

You can ask me anything, but how/where do i do this? iPhone settings somewhere? Safari settings? I looked but didn't find anything specifically named as you suggested above. 

[ScrollSmoother - Safari Issue related to ScrollSmoother (normalizeScroll)]

56 minutes ago, GreenSock said:

Historically, we've put a huge priority on consistency and ease of use.

This was worth responding to on its own. Ease of use is key in my view.

 

I currently have a very 'elegant' (to me) stack. I use SvelteKit, Tailwind, GSAP. I then add Storyblok for a headless CMS. I have made a system with Storyblok/SvelteKit that I can use in every project, and guess what - it includes gsap hehe. EVERYTHING JUST FLOWS ❤️.

[ScrollSmoother - Safari Issue related to ScrollSmoother (normalizeScroll)]

41 minutes ago, GreenSock said:

I know it's easy for other newer libraries to tout small file size as a benefit to try to appear "better" than GSAP. And I have nothing against any of the other libraries in particular - use them if you like, but beware of the tradeoffs because they'll rarely mention them and we try not to talk too much about them because we don't want to seem like we're insulting the hard work of other library authors. 

 

Nice response! 

 

I wholeheartedly agree to be honest. I was just curious about your thoughts/plans on the matter. I looked at the video of Motion One and quickly saw little point. I'd need to relearn another tool and the only benefit was, as you said, a few ms of gains? No clue why that's important. I didn't know about caching to be honest, so good job on explaining that bit. I'll check the article you shared, sounds like I'll learn something.

Overall I didn't think Motion One looked better than GSAP. I was actually underwhelmed when someone explained to me that the key FEATURE was the size and modularity. But as you said, to do some things i do in GSAP id need to import a ton of things. 

 

Currently I mostly use `{gsap, ScrollTrigger}` and that's mostly it. I mostly do simple animations as I dislike too much motion in any given thing, but GSAP is perfect for that.

 

https://www.seerstudio.co.uk & https://seerstudio.co.uk/service are the main pages of my recent website. GSAP made animating this stuff painless. 

 

 

Thanks for explaining your thoughts, always nice to have a seasoned developer share their thoughts on a topic. I'm mostly a frontend focused person so I lack exposure to this sort of stuff, I appreciate it. 

 

And you're welcome, we all need to 'blabber' about things that we've been pondering on for days/weeks/months!

Ciao  

[ScrollSmoother - Safari Issue related to ScrollSmoother (normalizeScroll)]

@GreenSock All good from my perspective! I also blamed Safari and I don't see how you could tame that beast. Just reading "many hundreds of hours" makes me shiver with pain. In some ways I think of safari as a sort of pain like explorer was. Nothing quite so exact of course, but still painful in some cases to work with, this being one of them I guess!

 

Only suggestion is a question: Do you have any future plans to make GSAP more modular than it is currently, hence reducing its size?

 

I'm only asking because I saw a video about motion one, which is essentially praised for the modular approach they took. More curious than anything, it seems like the only selling point of motion one to me so far. 

[ScrollSmoother - Safari Issue related to ScrollSmoother (normalizeScroll)]

1 hour ago, stijlmassi said:

With this stack, this site: https://agireflexology.com/ remains very stuttery on iOS Safari. In fact, I notice that smoothscrolling often is terrible on iOS. 

I honestly gave up for now with this issue. Why? Because on my safari it works perfectly. My partner's safari perfectly. My friend's stuttery. 

 

🤷‍♂️

 

I stopped using SmoothScroll in recent projects to avoid stuff like this. 

[Is the javascript bit as good as it can be?]

@SteveS Excellent, thank you for taking the time to look over it, I appreciate it  

Yeah, all animations will be relatively minimal for the project I'm building so I appreciate that tidbit of info.

[Is the javascript bit as good as it can be?]

Hi gang,

 

Just curious if anyone can improve/simplify the javascript bit of the codepen URL.

 

Haven't worked with a timeline in a bit so I may have missed some bits or overcomplicated it. The animation works exactly as I wanted it though, so that's great!

 

Cheers!

See the Pen VwVKWNX?editors=1010 by grizhlie (@grizhlie) on CodePen

[SVG-element not rotating around SVG center]

Thanks @Cassie. After this post I ended up researching SVG's a bit more. It was less about the tool and more about who was using it.

Thanks for the tip on relative-paths, don't really know what that means (yet) but I'll look into it now with a few exports. 

 

Appreciate the help