[Using quickTo along with directional rotation]

Nice! That worked super fine.
Just to understand it better: is there any reason why you prefer a single tween for the 3 properties instead of a quickTo for x and y and another tween just for the rotation?

[Using quickTo along with directional rotation]

Something like:
 

gsap.to(fish, {
rotation: `${angle}_short`,
duration: 0.8,
ease: 'back.out(1.2)'
})

inside the moveHandler fuction also works. Is okey having a gsap.to() on every mousemove? Or do I have to clean the previous tweens on each update?

[Using quickTo along with directional rotation]

Hey!
I'm working on a mouse follower using React + TypeScript, following the new useGSAP package recommendations. I'm trying to use quickTo with the rotational direction plugin, but it would only work with degrees in number (also will throw a TS error if using TypeScript). Is this indeed a limitation, or am I missing something here?
 

Created a demo really quick to showcase the scenario. As pointed out in line 48, using the ${rotation}_short syntax for the rotation property won't work along with a quickTo. Sample here:

Also, if not this way, what would you recommend to achieve the same "lerp" effect with the rotation while doing the same as "_short" does?
Thanks in advance 🫡 

 

See the Pen WNWRQgw by joyboyar (@joyboyar) on CodePen

[Warning: Extra attributes from the server: style]

On 2/2/2023 at 10:19 PM, chacrasoftware said:

run into similar issue using the app directory in NextJS 13. I'm using ScrollTrigger and ScrollSmoother plugin and managed to fix it by moving the gsap.registerPlugin(ScrollTrigger, ScrollSmoother) inside of useEffect/ useIsomorphicLayoutEffect hook.

 

hope this helps

Hi! Facing the same problem here using Next App router. Are there any benefits of the ssr lost if using this solution?
Normally you don't run any gsap on the server, but just in case.

[Problem with ScrollTrigger on Chrome mobile]

On 12/3/2020 at 3:05 PM, GreenSock said:

In the upcoming release, yes. You'll be able to set which events automatically trigger refresh(). By default, ScrollTrigger will refresh() on the following events: "visibilitychange,DOMContentLoaded,load,resize" but you can set it to a subset of those if you prefer using ScrollTrigger.config(). For example, if you don't want it to refresh() on resize, you could:

ScrollTrigger.config({
  autoRefreshEvents: "visibilitychange,DOMContentLoaded,load" // notice "resize" isn't in the list
});

You can preview the beta at https://assets.codepen.io/16327/ScrollTrigger.min.js

Hi! Just facing a similar problem in 2023. I was wondering if there's any better way to do this now, and if so, if it's possible to only ignore vertical/horizontal resize.

[React Complex Timeline Animation]

39 minutes ago, GreenSock said:

Does that clear things up? 

That was an incredibly clear explanation! Thank you very much 🖐️

[React Complex Timeline Animation]

Hi! Just looking for a solution for a timeline I was working on in React I found out I was having this same problem. While ctx.revert() works fine, ctx.kill() doesn't. I don't know why to be honest. 
 

  const headerRef = useRef<HTMLElement>(null)
  const headerCtRef = useRef<HTMLDivElement>(null)

  const timeline = useRef<GSAPTimeline>(
    gsap.timeline({
      defaults: {
        ease: 'back.out',
      },
    })
  )

  useLayoutEffect(() => {
    const tl = timeline.current
    const header = headerRef.current
    const headerCt = headerCtRef.current
    const ctx = gsap.context(() => {
      tl.from(
        header,
        {
          yPercent: -100,
          duration: 0.5,
        },
        0
      )
        .from(
          headerCt,
          {
            rotateX: 35,
            delay: 0.1,
            duration: 0.5,
          },
          0
        )
        .from(
          [headerCt, header],
          {
            autoAlpha: 0,
            duration: 0.2,
          },
          0
        )
      
      ScrollTrigger.create({
        start: 'top top',
        end: 99999,
        onUpdate: (self) => {
          self.direction === -1 ? tl.play() : tl.reverse()
        },
      })
    }, headerRef)
    return () => {
      ctx?.revert()
    }
  }, [])

If I would use ctx.kill() the timeline bounces in and back no matter what I do, I suspect because of react strict mode second call.

[Inmediate snap on scrollTrigger]

Hi! I was trying to achieve a similar effect to this codepen (found it in the gsap showcase) , but without all the complications of the loop. Most precisely, I was trying to achieve that instant snap effect, but without restarting when the array ends.
Something exactly like this.

I spent several hours yesterday without catching it, I would really apprec.iate any start point to work arround.

Thanks in advance

See the Pen LYRwgPo by GreenSock (@GreenSock) on CodePen