Black Ducas

Hi, here is the code I'm using to control a timeline via the scroll event: import { gsap } from "gsap" export default class HorizontalScroll { constructor(elClass) { // ..... code // The animation to use this.tl = gsap.timeline({ paused: true }) .to(this.container, {x: -(this.width - innerWidth), ease: "none"}) // Listen to the scroll event this.update(); this.bindEvents(); } bindEvents() { document.addEventListener('scroll', (e) => { this.onScroll(e) }); } /* Handlers --------------------------------------------------------- */ onScroll(e) { // Prevent the update from happening too often (throttle the scroll event) if (!this.requestId) { this.requestId = requestAnimationFrame(this.update); } } /* Actions --------------------------------------------------------- */ update() { console.log("update") // Update our animation this.tl.progress((scrollY - this.startY) / this.finishDistance); //<== this causes error // Let the scroll event fire again this.requestId = null; } } but I get this error Uncaught TypeError: Cannot read property 'tl' of undefined caused by this line inside update() method this.tl.progress((scrollY - this.startY) / this.finishDistance); Don't get where I'm wrong?

Ok, installed with npm install ./gsap-bonus.tgz and it works! In the package.json now I have "gsap": "file:gsap-bonus.tgz", It means that now I can't update via npm update? Instead I have to re-download the zip and re-launch npm install? Also, once installed can I delete the zip from the project folder?

Hi, I'm trying to use CustomEase.create("hop", ".17,.67,.81,.32"); but I get this error Uncaught ReferenceError: CustomEase is not defined I'm importing gsap with import gsap from "gsap"; What is missing?

Yeah, now it works, I'm going to study the new code. There's still a particular useful case where something goes crazy: that's when you don't have any element before and after the horizontal scroll, that is remove the 2 divs .other. Now if you scroll a bit, then back to the start and scroll again you'll see the container doesn't remain fixed, I suppose. We maybe need to reset or something the timeline? You know what causes that?

Ok, just trying to understand with some difficulties. The .container element is actually set at 5000px by default via CSS but it will contain dynamic content so the width is not know. I tried setting it for example at 8000px but when the horizontal element ends, the spacer is still visible for a while. Nevertheless it has the correct height set via JS... --- Trying to understand, I made this codepen with another approach, maybe more simple to follow: https://codepen.io/gooogooo/pen/QWjWKYp based on the attached scheme, but I don't get where I'm wrong

Hi @ZachSaucier awesome, masterful! That was not so easy for me. I'm studying it and optimizing it, will share my progress. Just a thing: why you multiply for 2, here gsap.set('.spacer', {height: width * 2}), is it maybe related to the fact that horizontal scroll seems to scroll at half of the speed of the vertical scroll? Isn't better if horizontal scroll at the same speed? ?

Hi, as suggested in another topic by @ZachSaucier, I'm trying to create an horizontal scroll without ScrollMagic. I want to reproduce this effect: https://codepen.io/gooogooo/pen/qBdewXg Here is my progress https://codepen.io/gooogooo/pen/QWbeRjm but I've various problems: - scrolling stops before the horizontal element end - after the horizontal element gets fixed position, when I scroll up it remains fixed, cause I don't understand how to catch this case to remove the fixed - in general, I'm not sure I'm following the correct approach. Any advices are welcome! Any ideas? Thanks

Hi @mikel I'm reading that but it seems all ok. Anyway, have you to advice a ScrollMagic alternative to use with GSAP 3? Thanks

Hi @ZachSaucier interesting, when will be ready this new plugin for replacing ScrollMagic? I can understand your approach seen in your codepen but now I need to develop an horizontal scrolling like this one https://codepen.io/netgloo/pen/qBdewXg and frankly doing that with your approach is a bunch of maths, don't think it's so easy

@Tasty Sites I saw that while searching solutions but really don't understand what it is. It seems to change the syntax. I don't want to use another library, I'd like to keep original syntax and logic by ScrollMagic. Also I think it will add extra KB to the compiled JS. Maybe I don't get the point, could you simply explain what it is and why using it? Thanks

I need animation.gsap.js plugin, can't remove that. Removing it get error: ScrollMagic.js:2647 14:28:54:985 (ScrollMagic.Scene) -> ERROR calling setTween() due to missing Plugin 'animation.gsap'. Please make sure to include plugins/animation.gsap.js

Just read it. I'm actually using this solution but I get some warnings I posted in that thread. You can help me?

I'm trying this solution but in console I get these warnings: ScrollMagic.js:2647 12:54:52:246 (ScrollMagic.Scene) -> (animation.gsap) -> WARNING: tween was overwritten by another. To learn how to avoid this issue see here: https://github.com/janpaepke/ScrollMagic/wiki/WARNING:-tween-was-overwritten-by-another Invalid property onOverwrite set to undefined Missing plugin? gsap.registerPlugin() Any ideas?

Tried but I get animation.gsap.js:39 Uncaught ReferenceError: TweenMax is not defined at animation.gsap.js:39 at Object../node_modules/imports-loader/index.js?define=>false!./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js (animation.gsap.js:44) I'm using GSAP 3 so I already was using gsap instead of TweenMax

Using GSAP 3 this doesn't work, I get this error animation.gsap.js:39 Uncaught ReferenceError: TweenMax is not defined at animation.gsap.js:39 at Object../node_modules/imports-loader/index.js?define=>false!./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js (animation.gsap.js:44) Any ideas?

Hi @mikel thanks for your solution but I have a problem. I need momentum on Draggable so I added throwProps: true and it works, here the codepen https://codepen.io/netgloo/pen/xxGoryJ Now, you can reproduce my problem so: drag the boxes to, for example, number 8 and then scroll. You'll see that it start to scroll from the start and not from the point it was. You know ho to solve?

Hi I already searched a lot on the forum for this simple question without finding solution, because all of the answers point to the use of ScrollMagic (or other external library). I already know ScrollMagic and all we know it's awesome with GSAP but in this specific case I can't use it (as any other similar library). I have to use plain Javascript. I simply need to move elements on the page with different speeds while scrolling. I setup this Codepen with an idea to do it, but doesn't work and overall don't know if it's the right way. https://codepen.io/netgloo/pen/GRgVNxo Someone can help me? I'm sure this will be useful for a lot of people. Thanks!

1) Ok, you know if is it well supported by all browser? 2) You mean that for simple/medium interactions you'd go with native IntersectionObserver without any libraries? Thanks

Hi @Shrug ¯\_(ツ)_/¯ thanks in advance for you answer. Some questions: 1) IntersectionObserver is more performant and precise than others like ScrollMonitor? About precision: with ScrollMonitor (that doen't use IntersectionObserver) it seems that sometimes it loses elements in viewport when scrolling fast. About performance: I really don't know... 2) I already know ScrollMagic and it's awesome, especially with GSAP but I tend to see it for big and complex scrolling interactions. Is it appropriate for small/medium interactions? Ie. when a text appears in viewport animate it with various properties via GSAP3. Let me know Thanks

Yeah @Sahil, that's awesome! ? Thanks Could I ask you some details? 1) Why you use timeline for first tween? Is it needed or it works also with a simple tween? If I'm not wrong we should use tween as much as possible, in place of timelines, right? ? 2) For the first second (duration:1) of the whole animation we have 3 tweens that act at the same time on the same element. Is this a common technique from the docs or it could causes conflicts? Thanks again.

Hi @mikel it seems the same as made by @Sahil gsap.fromTo(tween, {timeScale: 3}, {timeScale: 1, duration: 1}); What's wrong?

@Sahil the GSAP 2 codepen is exactly what I need! But I'm working on GSAP 3 and you're right, that timeScale doesn't work as expected. @GreenSock is it maybe a bug or something? Just in case, any idea for a workaround?

Hi @Sahil wow, so thanks! Almost there. I need the first tween to have a faster rotation at the beginning that decrease (ease out). At this point with this slower speed starts the second tween that infinitely rotates at that slower speed. I don't get how to achieve this

Hi I have to develop this animation where an image starts from scale:0 and opacity:0 then grows rotating with an easing power2.out then keeps it rotating infinite by linear easing. Some ideas? Thanks

Hi @ZachSaucier when hover a link it triggers the above animation on elements like this <div class="project-image" style="background-image: url(image.jpg)"> </div> with this CSS .project-image { display: none; will-change: transform; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; overflow: hidden; background-repeat: no-repeat; background-position: center top; background-size: cover; background-color: $color-1; // background-image: url(); //=> Image set inline on HTML element } I've about 5-6 links, each one animate (on hover) its relative div.