nico fonseca

Something like this, does it help? ? React.useEffect(() => { const duration = 2; tl.to(refApp.current, { duration, onStart: () => { console.log(controlCardWrapper); controlCardWrapper.start({ rotate: 100, transition: { type: "spring", mass: duration } }); }, onComplete: () => console.log("I am ready!") }); }, []);

Hey @Damian Hutter If you don't set a duration value GSAP will set it as '1' by default, that's because the onComplete function run before the framer-motion finishes, so you need to set the same duration as framer-motion.

And you're right, in version 3.6.1 the duration value works when use keyframes. In the release 3.7.0 the only change I can see is IMPROVED: you can stagger keyframe tweens, but i don't know if this affect that. I think @GreenSock can help us more ?

Hey @Leemoon you can use a defaults property. For example: gsap.to("div", { delay: 2, repeat: -1, defaults: { duration: 0.4 }, keyframes: [ { duration: 2, x: 100 }, { y: 100, delay: -2 } ] });

Hey @limbo I updated your Codepen with minors changes. ? - The duration value is now on the properties - I changed the ease property to 'none' - You have a typo: vid.currentTime should be video.currentTime https://codepen.io/nicofonseca/pen/a166af09295c0c5b458d00d56d5eba83

Hey @Leemoon, you need to set the duration for each keyframe. keyframes: [{ x: 100, duration: 1, }, { y: 100, duration: 2, delay:-1, }]

Hi @Vasyl Kril welcome to the forum! ? I saw your video and I assume the problem is the blank space on the bottom, so I think this is because of your smooth scroll function and the full height calculation. One thing i see is that you have a lot of <img> tags, you need to set a hardcode height or a callback function when all images are loaded, because those might change the height of the page. PS: And don't worry for the English ?

With the images I think you have an issue with the trigger method. I set trigger: image[0] and it's working.

@GGQa you don't have any class with "titles" and "captions".

@Elia i think you need to change this: .scaleDown { width: 120vw; height: 120vh; position: absolute; top: 50%; left: 50%; background-color: red; transform-origin: 50% 50%; } for this .scaleDown { width: 100vw; height: 100vh; position: absolute; top: 50%; left: 50%; background-color: red; transform-origin: 50% 50%; } I updated the Codepen so you can check if it is ok now ?

Hey @LX45 ! As @Cassie mentioned it is important for us that you create a minimal demo to try to solve your issue. Btw recently there was a thread about Nuxt and ScrollTrigger.

@mikel much better now ?

Hey @Elia welcome to the forum! ? Do you need something like this ? https://codepen.io/nicofonseca/pen/9ee2f57f2239a4c22a7d2df0c8e482fc

Hi @mlikaon, the issue is because you used negative z-index + transform property. You can see more here. I updated your demo with some changes. https://codepen.io/nicofonseca/pen/b80cc306613c11d0c5fb07c3c891c756 Cheers.

Hi @whizzbbig , welcome to the forum ? I downloaded your code and I found the issue. You forgot to change the duration values on the imagestrip.js For example, in old gsap versions you wrote something like this: TweenMax.to(element,1,{...}) But now it has to be: gsap.to(element,{ duration:1, ... }) So you only need to change that PS: I attached the new js file where I changed it in some places so now it works, but you still need to replace it on other places. imagestrip.js

Hey @zozo ! Here is the thread with the same problem: https://codepen.io/nicofonseca/pen/1fb50e40f6c086568e3d2585799175e6. ?

Hey @bytrangle, i love the animation ? ! You can check this thread, i think it will be very helpful for you.

@faithdwsn , I think your issues are coming from the position parameters, you can go here to see more about them. For example if you change your code: master.add(crabLegs1(), 0) master.add(crabLegs2(), "+=0.5") master.add(crabLegs3(), "+=0.5") master.add(crabLegs4(), "+=0.5") to: master.add(crabLegs1(), 0) master.add(crabLegs2(), 0.2) master.add(crabLegs3(), 0.4) master.add(crabLegs4(),0.6) You can see now the legs move sync. When you set "+=0.5" on your animation, this animation will wait to the previous one to finish + 0.5sec. to start playing. Btw, I don't know if this is your real issue but i hope it helps you. ?

Hey @Sam Smyth ! You can use the fromTo animation to set the initial value. Here is an example: https://codepen.io/nicofonseca/pen/00e1205933085f693b78e73ed75ebd22

Hey @Yunus Emre I saw your demo and the problem is not from Gsap or Next, the issue is related with loading times. If you set the network as "slow 3g" and you are on the home page, the images are loaded before your Javascript, so when your script runs the images have width and height. On the other hand if you are on about page and reload the site, your script is loaded without images, and then if you go to the home page the images aren't loaded because as they only exist on the home the browser needs to download them, that's the reason you have those random numbers. I created a demo with the images on the about page, and if you go to the home the parallax is working fine. https://codesandbox.io/s/jovial-paper-y21b7 As @OSUblake said, you need an onload function and run ScrollTrigger when the images are loaded. Hope this helps! ?

@Billy Brown you have a typo erro in the ease property, is "circ.out" not "circa.out".

Hey @devin1229 you can access to the delay property in the same way you did with the duration, so you can do something like this: return gsap.to(targets, { duration: config.duration, scale: 1.3, ease: "power.inOut", yoyo: true, repeat: 1, delay: config.delay, }); or you can add your effect to a timeline, for example: //with extendTimeline: true var tl = gsap.timeline(); tl.yourEffect(".class", {configProp:"value"}, "+=position"); //without extendTimeline: true, you'd have to do this to add an instance to the timeline: tl.add( gsap.effects.yourEffect(".class", {configProp:"value"}), "+=position");

@orion_prime yes trackpad fires wheel event, sorry I misunderstood when you said touchpad I thought that you were talking about touch devices ?. It is complicated to normalise the mouse wheel value, because it depends on the device, browser, and if you use trackpad or mouse. ?

On this part of your code: function (gltf) { gltf.scene.scale.set(10, 10, 10); gltf.scene.position.set(0, 0, 0); scene.add(gltf.scene); gltf.animations; // Array<THREE.AnimationClip> gltf.scene; // THREE.Group gltf.scenes; // Array<THREE.Group> gltf.cameras; // Array<THREE.Camera> gltf.asset; // Object gsap.to(gltf.scene.position, { scrollTrigger: { start: "top top", end: "10%", markers: false, scrub: true, pin: true, toggleActions: "restart pause resume pause" }, x: 2, y: 2, z: -1 }); },

Hey @Boudi Salim I saw a lot of errors on the demo, but regarding your question the problem is because you call gltf.scene.position before it loads.