Jump to content
Search Community

Jay George P

Members
  • Posts

    6
  • Joined

  • Last visited

Everything posted by Jay George P

  1. Fantastic, removing `once: true` fixed things. You can explain your theory now PS FWIW rolling back to 3.8.0 did not change anything.
  2. I'm getting an error when loading a page when you don't start at the "top" of the page, e.g. if you scroll down near the bottom of the page, and then refresh, you get an error, but if you start fresh from the top it works fine. NB you might need to refresh a couple of times to reproduce this, it happens about 50% of the time. If I open the console when the animations don't load I get `Uncaught TypeError: Cannot read properties of undefined (reading 'end')`, pointing at this code: ``` function setupSplits() { gsap.utils.toArray('[data-gsap="split-text"]').forEach(el => { gsap.from(SplitText.create(el, {type: "words,chars"}).chars, { duration: 0.8, opacity: 0, y: 10, ease: "circ", stagger: 0.02, scrollTrigger: { trigger: el, start: 'top 80%', end: "top 0%", once: true, } }); }); }; setupSplits(); ``` Is there something basic I'm doing wrong here?
  3. Thanks for your feedback. I actually read about easing shortly after I posted this question. Here is an updated and tweaked Codepen for anyone that runs into this too: https://codepen.io/JayGeorge/pen/RwjjmWv
  4. I'm trying to get this logo "motif" shape to fill the screen as you scroll. I have it working but it's far from a smooth/polished experience. Scroll down to activate the blow-up effect. I've added red borders just to make things clearer. My question is, am I doing something wrong? And how can this be silky smooth? At the moment it accelerates too fast and the 'easing' is not pleasing to the eye.
  5. Brilliant, thank you so much, I really appreciate the prompt solution!
  6. Hi GSAP peeps, Please can someone enlighten me. In the attached simple example I have a Split Text function that I would like to use repeatedly for headlines. (Scroll down past the dummy div to see the text start to appear). However, as soon as the spacing is a bit much it only triggers on the first instance—in this case I've set both font-size and padding to 5rem to illustrate. If you switch the h2 font-size and padding values to 1rem instead, it works perfectly; triggering as each headline scrolls in. Many thanks in advance for any help.
×
×
  • Create New...