Black Ducas

@ZachSaucier oops, I just put the .preventDefault() and this doesn't happen anymore. Right?

Thanks @ZachSaucier for clarify. Just one thing: I noticed that clicking the link when page isn't at top it doesn't scroll starting from that point but it abruptly jump to the top (without animation) and then animate the scroll down. Is it normal? Here my code: if (this.shopCtaBtns) { this.shopCtaBtns.forEach(element => { element.addEventListener('click', (e) => { gsap.to(window, { duration: 1, scrollTo: "#section-overview", ease: "power4.inOut" }); }) }) }

Hi I'm trying the scrollTo plugin, awesome, just a detail, when it triggered it adds an hash (#) at the end of the URL, like www.mysite.com/page# How can avoid this? Second and last one, I'm trying to use it with class instead of id and it seems to work, is this correct or is recommended to use id? gsap.to(window, { duration: 1, scrollTo: ".section--overview", ease: "power4.inOut" }); Thanks

Hi @ZachSaucier yes I'm trying to understand it, could you give some little help on the overall approach and key points? Basically the initCell function seems the core. Thanks

Hi @ZachSaucier , yes I usually use GSAP 3, I'm just using the version of the original example, next I'll port it to v3. Thanks for answers, point 1 solved. Other 3 ones are not immediate to me. In your opinion is there a better/simpler approach to do the same thing?

Hi @ZachSaucier right! It was missing the trigger, my mistake, but my first problem was how to control a transition by dragging. I found this example by @OSUblake that fits better my case. https://codepen.io/osublake/pen/YrXdGZ Basing on that I was able to do this: https://codepen.io/gooogooo/pen/JjYbjaM Not bad, but I'm stuck on some details: - most important, how can I know when a single transition ends? I need like a callback to start another animation - I can't disable the infinite loop, is there an option? - h

Hi friends, I'm trying to develop a carousel based on this example. I removed the "infinite" feature and I'm trying to create a transition on cards while dragging, that is: while dragging the slider, Card 1 scale down (to the size of other cards) and Card 2 scale up. (When the transition ends I'll get Card 2 title inside and inject in "carousel__card-title" element with another animation). Because of this I think it needs snap in order to determine when a single card transition ends and eventually let control by navigation arrows (next/prev). I'm struggling to understand how to handle the

Hi @GreenSock, I find that demo very unusable, because you need to have a trackpad (or similar) to scroll horizontal and you need to know you can scroll horizontal in that way. All things a normal/middle user easily doesn't know. I meant an effect like this (in the example made by ScrollMagic): https://codepen.io/gooogooo/pen/qBdewXg So, as you can see, it's controlling an horizontal animation by vertical scrolling. This effect is seen on many important hyped websites and it's requested more and more by clients. Will this be possibile with th

@OSUblake @GreenSock We love too the horizontal scroll in certain case, like for history timeline. That example from Scrollmagic is always been disappointing and has bad UX. Horizontal scroll necessarily needs to be scrolled by mouse wheel up/down like we tried to do here: If the new plugin will already implement this, it would be super super awesome.

Hi @OSUblake Class field gives me compiling error Support for the experimental syntax 'classProperties' isn't currently enabled but I will deepen next on this, since it's related to my webpack workflow, I think.

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 -------------------------------------------

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 w