nico fonseca

Hey @Haider Amin , your issue is because you are using "0" in position parameters so the animations are overlapping. https://codepen.io/nicofonseca/pen/4e5af64590a44ae227de9b2943b6cde0?editors=0010 If you have a lot of animations, it is better to use labels or different timelines to keep your animations encapsulated and separated. Using labels: https://codepen.io/nicofonseca/pen/d6779e2b71e30a654806fd1378f5fad6?editors=1010 Using different timelines: https://codepen.io/nicofonseca/pen/6c5b9606c52391c02e25d27ece652f84?editors=1010 Other comments: - Don't use querySelectorAll every time as it already returns all the children. const pie_1 = pie_chart.querySelectorAll(".pie_chart")[0]; const pie_2 = pie_chart.querySelectorAll(".pie_chart")[1]; const pie_3 = pie_chart.querySelectorAll(".pie_chart")[2]; const pie_4 = pie_chart.querySelectorAll(".pie_chart")[3]; const pie_5 = pie_chart.querySelectorAll(".pie_chart")[4]; Instead, you can do something like this: const pies = pie_chart.querySelectorAll(".pie_chart"); const pie_1 = pies[0]; const pie_2 = pies[1]; // Or use toArray gsap method const pies = gsap.utils.toArray(".pie_chart"); const pie_1 = pies[0]; const pie_2 = pies[1]; - Don't animate a property when the final value is equal to your previous animation, for example: tl.from(pie_1, { opacity: 0, scale: 0, }); tl.to( pie_1, { opacity: 1, //this is unnecessary because the previous animation animate opacity to 1 duration: 0.5, } )

Hey @PG1 you can use .timeScale() method to change the velocity of your timeline ? https://codepen.io/nicofonseca/pen/2bf967d372822e74956540bc54c5650e

I think you see a different behaviour in your site/Codepen because Codepen uses an Iframe. You can check, for example, the Codepen full page vs the CodeSandbox full page (no iframe). I tested it on my iPhone and the behaviour is completely different. Making an infinite scroll on mobile it can be a very hard task, more if you use a native scroll. I made it here https://danielebuffa.me/list/ and I wanted to cry. My recommendation is to try to make your nice effect only for desktop, and on mobile remove the infinite scroll so you can save yourself from a lot of headaches.

@Cassie i didn't know about this Safari bug and i don't find anything related to it, but css filter is not working on svg elements ? Safari is the new IE!!! ? https://codepen.io/nicofonseca/pen/4c68be32786a888814a93cdbe34ab177

Hey @Faraaz , welcome to the forum! ? Apparently this is a Safari bug. I tested it on Mac and Iphone, I don't know if your issue is happening on Android too. I added the filter in the HTML and it works well https://codepen.io/nicofonseca/pen/a74e2ca0652ab6272c02bec133ccae49 Btw, to use fromTo animation do it like this: tl.fromTo('.triangleL', 10, { attr: {points:'0,338 0,223 481,280'} }, { attr: {points:'0,398 0,163 481,280'} } ,0); instead of: tl.from('.triangleL', 10, {attr: {points:'0,338 0,223 481,280'}},0); tl.to('.triangleL', 10, {attr: {points:'0,398 0,163 481,280'}},0);

Ups, sorry for that! Now is public ? And same for me, I saw it working well on mobile.

Hey @Fisher666 You have images of 4.4MB, I changed them and the transitions worked well. If you want to animate images it is recommended to optimise their weight. The overflow is preserved in the transition, the problem is that you can't see it because you set the height property with !important and you should NEVER do that on your css, even less if you need to animate that property later. ? https://codepen.io/nicofonseca/pen/2bc450a7d05187e2c8109438a9096b88

You can add callbacks on your timeline like this: const tl = gsap.timeline({ onUpdate:..., onComplete:..., onStart:..., ... }); Or you can use eventCallback() or call() , depending on what you need.

Hey @matt1 welcome to the forum! ? Here you have a thread about ScrollTrigger + sequence images ? My recommendation is to use jpg images instead of png and reduce their size as much as possible (you have images of 150kb)

Hey @jensnielsen welcome to the forum! ? ScrollTrigger is not triggering because elements are outside the window screen, so you have two ways to handle this: 1. Adding start: "top bottom+=150" https://codepen.io/nicofonseca/pen/f181d91946646195e7439a529a233c93 2. Adding refreshInit to set Y value as zero https://codepen.io/nicofonseca/pen/9e57a43d560e98d4ae4ab0f5bcfc5a4d Another thing to keep in mind, whenever you want to handle a property with GSAP it is better to set it also there instead of CSS. Hope this helps! ?

Hey @tolka you can do something like this ? https://codepen.io/nicofonseca/pen/badf67592921f8951b6366ce06367181

I made some example for you using clipPath ? https://codepen.io/nicofonseca/pen/d48c0e046673bbec4296bd9a692ae1d2

Nice! I really like the mobile version ?

You can set whatever you want as long as the property exist in the object/element/etc. In your case, the property zIndex doesn't exist on your Tween so you can't set it. And yes, if you are going to handle a property with GSAP it is better to set it there too in order to avoid future conflicts. ?

I made a Codepen for you, to explain better the reason why that message comes out. https://codepen.io/nicofonseca/pen/8cda590c89771c124f3d4666a2c39dac I created two objects but the first one without the zIndex property. So, when GSAP tries to animate its zIndex property it does not exist, then it says: Hey, I don't know what to do with this! And it is different with the second object which has the zIndex property. Hope my little explanation helps ?

Yes, "this" is from the Tween itself, that's because you can't set a zIndex. _pt is a private property that GSAP uses, if you need to access to the targets, you must use the target () method. Btw, the data is different than the parameters, you can use it like this: const tween = gsap.to(almondBox, { duration: 0.5, x: 50, zIndex: 0, onComplete: cb_animCompleted, onCompleteParams: [200] }); tween.data = {zIndex:200}; // in the cb_animCompleted console.log(this.data)

?

Hey @Robert Wildling, the problem is because your scope in on Window, so you are setting the params to the Window object. If you remove the callbackScope, the scope will be on the Tween. So if you need to set these params to an element, you can do something like: gsap.set(this.targets()[target_index], params); // or gsap.set(almondBox,params); // or gsap.to(almondBox, { duration: 0.5, x: 50, zIndex: 0, onComplete: ()=> gsap.set(almondBox,{zIndex:20}) }); Here you have a video from @Carl where he explains callbacks and callbacksScope ?

Niceee ? ? You are welcome Greg ?! I also discovered it recently and now can't stop using it ?. You can use a normal .set() but to boost your performance is better to use quicksetter ?

Hey @_Greg _ I really liked the idea ? I used a quickSetter to set the lines position and updated them based on the wrapper position. https://codepen.io/nicofonseca/pen/27b6e70f467907cd31e5ed6f528a5c90?editors=1010 Is it helpful ?

Hey @laurentplenet welcome to the forum! ? Here is a thread about how to achieve your goal.

@Space Man I'm not seeing anything in your pen. Please import GSAP and add the missing HTML elements ("#sweep_slow, #sweep_fast,#flash") so we can check your issue. Btw here is a recent thread about how to sync a video with a timeline:

I have the same issue in Chrome Version 93.0.4577.63, Macbook PRO 13 Big Sur ?

Something like this? ? https://codepen.io/nicofonseca/pen/f7401218a6d6adac9fa8567fb2f580af or animating each element https://codepen.io/nicofonseca/pen/b6044cbd184a6019346683d1ead98dfb