Jump to content
Search Community

bdrtsky

Members

  • Posts

    81

  • Joined

  • Last visited

 Content Type 

Posts posted by bdrtsky

    How to register and use SplitText plugin?

    in GSAP

    Posted

    First of all I am really frustrated that I had to spend so much time figuring out how to use PAID plugins. Sorry, but I am really frustrated, so I will speak about this.

     

    Second, was it so hard to put clear documentation in SplitText chapter how to freaking install it???

     

    So I am trying

      

    import { gsap } from 'gsap'
import { MorphSVGPlugin } from 'gsap/MorphSVGPlugin'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { SplitText } from 'gsap/SplitText'
gsap.registerPlugin(MorphSVGPlugin)
gsap.registerPlugin(ScrollTrigger)
gsap.registerPlugin(SplitText)

    And what next??? It doesnt exist in window, and it doesnt exist in gsap property. Holy crap, guys. Why this need to be so ugly and confusing.

    Possible to pin to bottom of trigger?

    in GSAP

    Posted

    @mikel tahnk you for that great example? I solved it other way, but good to know alternatives!

     

    So my initial mistake was that I was trying to find the way to pin between fromTo animation. Which is seems impossible, right?

    I did it with 2 different functions.

    Possible to pin to bottom of trigger?

    in GSAP

    Posted

    Let me explain more how this effect is done:

     

    1. We put all headers (that have same height) in fixed element, that have same height and overflow hidden. Headers are absolute positioned.
    2. Each header listens some section
    3. When section is scrolled up to header height (100px in my codepen) - enter effect should be triggered. So header should be transitioned on Y axis from bottom until section reach the top
    4. THEN IT SHOULD BE PINNED (this is where all issues are) until bottom of conteiner reach up to 100px of the top of the screen
    5. And when it does - then fixed pinned header should start second - leaving part of the effect. In meanwhile - the next header should entering. And this is how effect is done

    Now the question how to do this with new GSAP API? This actually pretty trivial with vanilla JS. But I wrap my head around with ScrollTrigger...

    Possible to pin to bottom of trigger?

    in GSAP

    Posted

    Thanks for helping, but this is not how this effect is done. 

     

     

    As you can see they have all fixed headers in one container, and then track which section in viewport and transition translate according headers.

     

    All I am asking: how to pin fixed header until bottom of trigger? I tried that already - it doesn't work.

    Possible to pin to bottom of trigger?

    in GSAP

    Posted

    First of, congratulations with new release and new ScrollTrigger plugin! I started to play around with it, and I must say - I am impressed. So much, that decided to buy a GSAP licence this week 😀 Even if ScrollTrigger is free!

     

    Now, I am trying to replicate such effect - midnight.js

    This is basically just a bunch of fixed divs, that transitioning on Y axis when appropriate bottom/top of the section triggered.

     

    As I understand I need somehow to pin fixed heading element after first part of animation is done, until the bottom of trigger is reached. I played with it couple of hours and couldn't work this out. Can someone point me how to acomplish this?

     

    This is basic setup - 

     

     

     

    See the Pen gOPOqJQ by dhatt (@dhatt) on CodePen

    A series of Youtube videos explaining animation math

    in GSAP

    Posted

    Hello, guys. Some of you recommend in one of the topics a very nice series of Youtube videos, where very smart guy explaining math related with animations. Pretty long series - as I remember at least 20 videos. I forgot to save it and now I can't find it! Can someone please give me a link if you know what I am talking about? Thanks in advance and sorry for not relevant topic.

    Glitch artifacts in GSAP 3

    in GSAP

    Posted

    I was using GSAP in my apps for ages. But I ran into issues with GSAP 3.

     

    https://vimeo.com/380463927

     

    I use GSAP for leave/enter page transitions. As you can see there's some kind of jerking going on on the end of transition. When I do absolutely same animation with GSAP 2 or anime.js I have no issues.

      

    leave(el, done) {
      gsap.to(el, 0.3, {
        y: '5px',
        opacity: 0,
        ease: 'none',
        onComplete: done,
      });
    },
    enter(el, done) {
      gsap.from(el, 0.3, {
        y: '5px',
        opacity: 0,
        ease: 'none',
        onComplete: done,
      });
    },

    Any clues what is that? 

1
2
3
...
4
Page 1 of 4  
×
×
  • Create New...