321dev

@GreenSock thanks, but it plays the animation only once when scrolling upwards.

Thanks a lot to both of you for your answers. @GreenSock Just to understand what you've done: You added 6+1 arbitrary entries to the timeline and that lead to the total scroll range to be divided into 6 equal parts? Is there a way to make the animation run backwards when scrolling up?

The first codepen shows the working starting point. Just an animation with a scrolltrigger. https://codepen.io/trogmaniac/pen/ZEKJrXO Now i'd like a longer scrollarea (600px) and i want the animation to trigger every 100px. This is my attempt here: https://codepen.io/trogmaniac/pen/qBRqqQX I don't quite understand why the start of any following triggers are not directly after any previous one. Somehow i suspect that's because of the space that's added by the pinning, but i don't know how to cope with that.

I'm using gsap.interpolate to perform some kind of keyframe-animation. But gsap.interpolate interpolates linearly between the values, based on their position in the array. E.g: gsap.utils.interpolate([0, 50, 100], 0.5); // 50 I'd like to place the keyframes at specific positions, e.g. i want to map: 0 -> 0 0.3 -> 50 1 -> 100 Is there an easy way to achieve this?

The purpose is to enable gsap.utils.interpolate() to interpolate values it can't interpolate (correctly) otherwise, in my example a THREE.Quaternion

So this would first interpolate between items 0 and 1, then 1 and 2, and so on. That's what i planed to do, but i wasn't sure if the transitions were smooth (enough). I'll try it out tomorrow. BTW: Maybe gsap.utils.interpolate() could be expanded so that you could pass a custom function that interpolates between two elements? Thanks a lot for your time and effort!

In an ideal world, i 'd like to use gsap.utils.interpolate like this: let q1 = new THREE.Quaternion() q1.setFromEuler(new THREE.Euler( THREE.Math.degToRad(0), THREE.Math.degToRad(45), THREE.Math.degToRad(0), 'XYZ' )) let q2 = new THREE.Quaternion() q2.setFromEuler(new THREE.Euler( THREE.Math.degToRad(45), THREE.Math.degToRad(0), THREE.Math.degToRad(90), 'XYZ' )) let q3 = new THREE.Quaternion() q3.setFromEuler(new THREE.Euler( THREE.Math.degToRad(90), THREE.Math.degToRad(90), THREE.Math.degToRad(90), 'XYZ' )) var interp = gsap.utils.interpolate([q1, q2, q3]); let qx = interp(0.3)

Yes, thanks. But as i mentioned in my OP, i know how to interpolate between two Quaternions using three.js method. But i need to interpolate between more values, but i don't think just interpolating between 0 and 1, then 1 and 2, etc. will give a smooth result. But maybe i should try it out and check how bad it looks.

That was just an example showing why the "normal" interpolation doesn't work with angles. I don't have code for this.

The modifiers might work, if i knew how to interpolate quaternions at low level - which i don't. For now, i'll try to use "normal" Euler rotations like i found here: https://codepen.io/ste-vg/pen/GRooLza and see how it goes. Thanks for your help.

Thanks for your response, but unfortunately that does not help. Interpolating any linear values (like a 3D position) with GSAP is not a problem, but Quaternions can't be interpolated that way. The interpolating code must be aware of the meaning of the values. E.g. when you wanted to interpolate a rotation in degrees from 350 to 10, the code should go from 350...359..0...10, instead of going backwards from 350 to 10.

There are quite a few posts about this, but they're many years old, and many of them mention a plugin that can handle quaternions. What's the state today? Can GSAP tween quaternions, or do we still need a plugin? Specifically, i'd like to use interpolate() with three.js quaternions. (I know about three.js quaternion.slerp, but i need to interpolate over a dynamic number of values.)

Very neat, thanks a lot!

It's a little hard to explain in words what i want to achieve. When you look at the codepen, you see that the animation starts after scrolling down 100 pixels. I want something like a "deadzone" for the scrolltrigger (what "pin" does when using scrub based animations). When the user scrolls down, nothing should happen in the beginning. After scrolling down 100 pixel the animation should trigger. The content itself should still not scroll. After scrolling down 100 more pixels, the page should start scrolling normally. I hope this was somewhat understandable. Is it possible?

Hi all, i'm experimenting with the combination vue + aframe + gsap + scrolltrigger. I built a small demo that rotates a cube based on the scroll position. This works fine. But when i set pin=true, somehow the a-frame scene gets messed up (several objects get copied and multiplied). The two added screenshots show the "bad" and the "good" version of the object structure. (Unfortunately they are directly on top of each other, so they appear as one. Each image starts with <div class="spacer") I have no idea what's going on, or what 'pin' does in the background. Does anyone have an explanation (and possibly a solution) for this? Thanks. <template> <div id="app"> <div class="spacer" /> <div id="scenewrapper"> <a-scene embedded vr-mode-ui="enabled: false"> <a-box position="0 0.5 -3" :rotation="`0 ${360 * progress} 0`" color="#4CC3D9"></a-box> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </div> <div class="spacer" /> </div> </template> <script> import Vue from 'vue' import aframe from 'aframe' import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" Vue.config.ignoredElements = [ 'a-scene', 'a-assets', 'a-asset-item', 'a-sky', 'a-camera', 'a-cursor', 'a-animation', 'a-entity', 'a-box', 'a-sphere', 'a-cylinder', 'a-plane', 'a-gltf-model', ] export default { name: 'App', data () { return { progress: 0 } }, mounted () { let _this = this gsap.registerPlugin(ScrollTrigger); let triggerConfig = { trigger: '#scenewrapper', start: 'top center', end: 'bottom center', pin: false, markers: true, onToggle: self => console.log("toggled, isActive:", self.isActive), onUpdate: self => { _this.progress = self.progress // console.log("progress:", _this.name, self.progress.toFixed(3), "direction:", self.direction, "velocity", self.getVelocity()); } } ScrollTrigger.create(triggerConfig); }, } </script> <style lang="scss"> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; margin-top: 10px; } #scenewrapper { width: 600px; height: 600px; } .spacer { background-color: #888; width: 100vw; height: 1000px; } </style>