Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Black Ducas

  • Content Count

  • Joined

  • Last visited

Everything posted by Black Ducas

  1. Hi I'm doing a super simple scroll-to anchor thing: let buttons = document.querySelectorAll('.btn'); if (buttons) { buttons.forEach(btn => { btn.addEventListener('click', function (e) { e.preventDefault(); // Scroll to gsap.to(window, { scrollTo: { y: "#anchor-el", offsetY: document.querySelector('.js-header').offsetHeight * 2, autoKill: false, }, duration: 1, ease: "power2.inOut", }); }); }) } It wor
  2. @ZachSaucier Hi the page is composed by 5-6 texts of maximum 35 words. They're short texts, that's why I thought to animate the single words. So you say the main problem here is the many words to process and not my code? Replaced all y with yPercent and added once:true. Hard to say if it improved There's something else I could try? Could improve performance put each words animation (gsap.from(childSplit.words...) in a timeline and then run each timeline only when text is in view? Don't know if it make sense, maybe it's just the same that happens
  3. Hi I'm animating texts on a webpage with this simple code that starts at page run: let texts = document.querySelectorAll("" + ".section__h, .section__t," + "body.s .e-content li, body.s .e-content p, " + "body.s .e-content h5, " + "body.s main section:nth-child(2) h1, body.s main section:nth-child(2) p"); texts.forEach(text => { let parentSplit = new SplitText(text, { type: "words", wordsClass: "text-parent" }); let childSplit = new SplitText(text, { type: "words", wordsClass: "text-child" }); gsap.from(childSplit.words, { scrollTrigge
  4. Hi @ZachSaucier added limitCallbacks ScrollTrigger.config({ limitCallbacks: true }); let texts = document.querySelectorAll(".section__head, .section__text"); texts.forEach(text => { let parentSplit = new SplitText(text, { type: "words", wordsClass: "text-parent" }); let childSplit = new SplitText(text, { type: "words", wordsClass: "text-child" }); gsap.from(childSplit.words, { scrollTrigger: text, y: "100%", duration: 0.75, stagger: 0.05, }); }); but it's as before. Scrolling up the animations are already complete.
  5. Hi @mikel super-interesting but it seems can't help me, for example I tried toggleActions: "play reset play reset" but it triggers animations everytime it enters or enter back. Also adding once: true, doesn't help because that "once" is automatically played at refresh 😕
  6. Hi I've some simple animations on some texts that are triggered when the elements appear in the viewport. let texts = document.querySelectorAll(".section__head, .section__text"); texts.forEach(text => { let parentSplit = new SplitText(text, { type: "words", wordsClass: "text-parent" }); let childSplit = new SplitText(text, { type: "words", wordsClass: "text-child" }); gsap.from(childSplit.words, { scrollTrigger: text, y: "100%", duration: 0.75, stagger: 0.05, }); }); It works very well, but if I refresh the page in th
  7. Hi I'm trying your method to split text twice in gsap 3 let split_1 = new SplitText(".js-text", { type: "lines", linesClass: "lineChild" }); let split_2 = new SplitText(".js-text", { type: "lines", linesClass: "lineParent" }); but I get error Uncaught TypeError: Cannot read property 'nodeType' of null Error is caused by the second split, because removing that I get no error. Any idea?
  8. Black Ducas

    Simple ScrollTo

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

    Simple ScrollTo

    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" }); }) }) }
  10. Black Ducas

    Simple ScrollTo

    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
  11. 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
  12. 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?
  13. 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
  14. 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
  15. 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
  16. @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.
  17. 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.
  18. 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 -------------------------------------------
  19. 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?
  20. 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?
  21. 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?
  22. 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
  23. 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? 🤔
  24. 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
  25. 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