alig01

Hey, 
 
I had the same issue a while back.
Try to add this css to your pen:
.glow-animation {
  will-change: filter;
}
source
But there are also other tricks which should help to access the GPU acceleration for the particular element.
Like: transform: translate3d(0, 0, 0);
Just google for it and test which works the best for your case. 
 
After the css changes everything looked normal on Safari (on my device).

Hope this helps and good luck with your project.

Hey, 
 
I tried it earlier and this is the outcome. I wasn't completely satisfied (but I couldn't look further), although I think it's close enough? 
I hope at least I got the direction right ^^ 
 

See the Pen yLGbVoK?editors=0010 by alig01 (@alig01) on CodePen
 
Tried it first with normal text outside of the SVG to animate it with stagger, but the spacing between the letters got lost and found a few threads to solve it, but it wouldn't have been worth the effort (for me ).
 
Hope this is what you are looking for and good luck with your project

Hey, 
 
create a parent element so you could use it as a trigger and animate the children like you want.
 
You've followed this approach in this post:
You used the parent (section) as the trigger and animated its children (".slide", ".o2lab__col").
 
Additionally, you could also add overflow: hidden to the parent to improve the effect.
Also be aware of fouc (Flash of Unstyled Content).
 
Hope this helps and good luck with your project.

Hey,
 
your pen is missing your whole css styling, based on the code I assumed you where using tailwind, but I never used it before. I changed w-[110vw] and h-[102vh] to min-w-screen min-h-screen so that it comes close to your desired style.  
 
Keep in mind that the animation of your provided codepen works because each section is the same size. If the size changes, you have to take this into account, but for this case there are also a lot of codepen examples out there (Showcases, How-Tos).
 
I hope this leads you in the right direction and good luck with your project.
 
Edit: 
Sorry there is no such thing as min-w-screen. As soon as the styling works, it is much easier to help someone.
I have updated the pen. But you should definitely check and improve the styling.

See the Pen jOXrbQa?editors=0110 by alig01 (@alig01) on CodePen

Hey,
 
I have adapted the codepen for your needs, the code for the drag direction change is from this thread answer, as I knew someone already asked the same question (the benefits for lurking around the forum).
 
Only thing left was the hovering logic.

See the Pen PoXNOEG?editors=0010 by alig01 (@alig01) on CodePen
   
Hope this helps and good luck with your project.
 

Hey,
 
maybe another approach would be to control the Flip animation using ScrollTrigger? I have never tried it before, but it sounds doable since Flip.from() returns a timeline.

See the Pen VwqaRyZ?editors=1010 by alig01 (@alig01) on CodePen
In some cases it's a little jittery (not sure if I have already fixed the mistake) and when reloading the planet is missing, but for demonstration purposes it should suffice.
 
However, you should definitely do some research in the documentation, forum or examples and look for improvements.
 
Hopefully this helps and good luck with your project.

Hey,
 
I could also reproduce it on my iOS device. When I took a quick look at the page with dev tools I noticed that you are using scroll-smooth which could cause the issue. A similar problem is discussed in this thread.
 
  
 
I hope this leads you in the right direction to fix the problem.

Hey,
 
you were almost there.
 

See the Pen YzRmWQB?editors=0010 by alig01 (@alig01) on CodePen
 
There is also an advanced example in the documentation, that takes a different approach:

See the Pen JjXqMZK by GreenSock (@GreenSock) on CodePen
 
Hope this helps and good luck with you project.

Hey,
 
as long as splitting the word into chars works, you could do something like this 

See the Pen OJryKWo?editors=0110 by alig01 (@alig01) on CodePen
 
I also helped someone in a other thread with a similar effect and he split the words differently, maybe that could help too.
 
Good luck with your project

Hey, 
 
gsap has super helpful learning material, which you should definitely check out. I would recommend you to start with this one, your problem will already be solved there by itself. 
 
To cite from the article: "Proper animation cleanup is crucial to avoid unexpected behaviour with React 18's strict mode. This pattern follows React's best practices."
 
Basically you have to wrap your animation code in a gsap.context and everything should look like expected.
 
useLayoutEffect(() => { let ctx = gsap.context(()=>{ //put here your Ani timeline //and your .to() animations }); return () => ctx.revert(); }, []);  
You will find other usefull tips from the follow-up articles, such as using useLayoutEffect when creating GSAP instances.
 
Good look with your project

Hey, the easiest solution would be to use stagger. It works like an offset for the starting time of each element. 
Check out the docs there is an interactive demo that can show you the possibilities.
 

See the Pen jOeLYWE?editors=0010 by alig01 (@alig01) on CodePen
 
Also no need to use fromTo, if you want to get to the initial position. And I added to your .element class visibility: hidden in the css to avoid fouc.
 
Hope this helps and good luck with your project.

Hey,
 
many suggest focusing on the animation first and adding scrollTrigger later, as it adds more complexity and only causes confusion when it doesn't work as expected.
 
In general, I would try to avoid nesting scrollTrigger. Furthermore, timelines are meant to be used for sequencing animations. So instead try to create a timeline outside the loop to which you then assign your animations.
 

See the Pen ZEjxQwO?editors by alig01 (@alig01) on CodePen
 
Hope this points you in the right direction.
Good luck.
 

Hey,
 
I think you are looking for something like this 
const pinSlider = useRef(); useLayoutEffect(() => { let ctx = gsap.context(() => { let contents = gsap.utils.toArray(".content"); gsap.set(contents, { autoAlpha: 0, y: 500 }); let tl = gsap.timeline({ scrollTrigger: { trigger: pinSlider.current, scrub: true, pin: true, start: "top top", end: "+=3000 bottom", markers: true } }); contents.forEach((content) => { tl.to(content, { keyframes: { y: [500, 185, -325] }, duration: 5, autoAlpha: 1 }); }); }, pinSlider); return () => ctx.revert(); },[]); Just make sure you remove the numbers from your divs and the refs which are no longer needed.
 
Hope this helps.

Hey,
 
There are already a few questions that go in a similar direction. The effect you are looking for is called "ripple" if I am not mistaken.
 
Here are a few of them (just search for "ripple" and select "all content"):
 
There are also some codepens that have this kind of effect, without gsap. 

See the Pen wGWbEg by aspeddro (@aspeddro) on CodePen

See the Pen dMyQEy?editors=0010 by PezCoder (@PezCoder) on CodePen

See the Pen qdQPoL by Shyam-Chen (@Shyam-Chen) on CodePen

See the Pen eYgyyBb by thepuskar (@thepuskar) on CodePen
 
Hope this helps and serves as a good starting point.

Hey, 
 
There is a small error (scrub) that slipped in, which is why it didn't work properly. But don't worry everyone has been at the similar point and its part of the learning curve.
 
ScrollTrigger has a property for this once:true
 
Its because you are using scrub: 2. Scrub is directly linked to the scrollbar, so the progress of your desired animation depends on its position, which is why your toggleActions won't work. Just remove it and it should work as expected (
See the Pen WNvVOWw by GreenSock (@GreenSock) on CodePen
).   
Scale your element to 0.5, for example, and you'll see that the markers are still on top and just adapt to the size of the element.
 
I am not sure how to answer it or if I even understood the question correctly, but I will try.
ScrollTrigger has already default values for start and end which are well set for the most cases.
However, if you want to start the animation earlier, you have to change the start point and just try from which point it looks better for you. The same goes for end, if you want the animation to go longer/slower, you have to increase the end point, for example like this end: "+=1500 bottom"
 

See the Pen NWzmEVG?editors=0010 by alig01 (@alig01) on CodePen
I created a codepen where I tried to simplify everything a bit, but the question was whether scrub: 2 was intentional or whether it got there by accident during trial and error and copying.
 
Hope this helps.

Hey,
 
you could do something like this for the scaling part 
 

See the Pen gOKywXr?editor by alig01 (@alig01) on CodePen
 
Hope this helps.

Hey,
 
you need a timeline in which the boxes are moved sequentially to your desired positions. To do this, you can create an array with the box elements and iterate over them.
Furthermore, you might consider creating a layout directly where the boxes are stacked on top of each other to make the animation easier (optional).
 

See the Pen WNyWxXb?editor by alig01 (@alig01) on CodePen
 
Hope this helps.

Hello Olav,

yes, such effects can be easily achieved with gsap.
I did a quick search for a codepen and found a similar example and adapt it slightly.
Heres the 
See the Pen ZEoVxQG by alig01 (@alig01) on CodePen
 
When I work with clip-paths, I mostly use this page, maybe it is helpful for you too.

Hey, I tried it out of curiosity.
 

See the Pen poKJOJy?editors=0010 by alig01 (@alig01) on CodePen
 
And thanks for the link @Rodrigo, it was very helpful.

Hey, 
 
I'm not sure if I not aware of something or don't understand it correctly, but the page needs to load all the content first to set the markers correctly. So you should be able to use scrollTrigger.
 
I cleaned up your second codepen and it doesn't look bad to me, but unfortunately I don't have enough time to look at the question in more detail because it's already late. 
 

See the Pen VwdYWoq by alig01 (@alig01) on CodePen
 
Hope this somehow helps

Since you obviously went through the trouble to solve the problem yourself, I'd like to try to steer you in the right direction. 

See the Pen bGMyoMe by alig01 (@alig01) on CodePen
 
I have provided an alternative implementation in case you don't want to purchase a membership yet.
 

Hey, 
 
you are  almost there. The only thing missing is a condition that you check inside your loop.
checkpoints.forEach(function (cp, index) { if (index > 2) { gsap.fromTo( cp, { autoAlpha: 0, yPercent: 100 }, { yPercent: -50, autoAlpha: 1, ease: "none", scrollTrigger: { containerAnimation: scrollTween, markers: true, trigger: cp, start: "left right", end: "left center", invalidateOnRefresh: true, scrub: 1 } }, "+=1" ); } }); As an alternative, you could also manipulate your array before calling forEach(): Array Manipulation

Hey,
 
while looking over it, I noticed that I couldn't find your class names anywhere. After adjusting them, the animation worked as intended.
let groups = gsap.utils.toArray(".accordion-wrap"); let headers = gsap.utils.toArray(".acc_title"); Good look
 
 
 

Hey.
I skimmed it briefly and saw that in the class useLocoScroll.js useEffect executes on every re-render.
Once you change line 69, the issue should be fixed.
}, []) Good look
 

Hey,
 
Replace your useEffect with this and it should probably work as you wanted it to.
useEffect(() => { const element = parent.current let ctx = gsap.context(() => { gsap.to('.title', { opacity: 0, scale: 0.7, delay: 0.5, ease: 'power1.out', scrollTrigger: { trigger: '.title', markers: true, scrub: true, start: 'top top', end: 'bottom top' } }) gsap.to('.image', { scrollTrigger: { trigger: '.productImage', markers: true, scrub: 2, start: 'top top', end: '+=400', pin: true }, scale: 1.3 }) }, parent) return () => ctx.revert() }, []) For further reading you can check this link out, it will definitely help you out.