[gsap.to rotation only work at the first time]

1 hour ago, mindthegap said:

rotation  is done

I'd imagine this is cause it's an absolute value and once it rotates to that value (transform: rotate(-170deg)) it's trying to just tween from that value to that value, so it's not doing anything. Maybe try a relative value using += or -= eg: rotation: '-=170',.

[Infinite Scroll working on React but not with Next.js]

Also, have you tried the useLayoutEffect(() => {},[]) hook? It sounds to me like ScrollTrigger is trying to calculate things before the layout is done rendering (with it working on resize). Or make sure to check if your ref is available in the dom before running your function.

This may also be helpful with this (useIsomorphicLayoutEffect):

 

[GSAP Run all other animations without waiting for the first one]

2 hours ago, DanielLav said:

I want all the animations that are in the standardAnim function to run immediately on page load without waiting for the headerItem to load.

Not sure what your dev structure looks like, but you could put the headerItem tl after the standardAnim() function call. That way if that function is there, it'll put that into the timeline before it looks at the headerItem addition to the timeline. If you can't do that, you could do something like:

 

  const tl = gsap.timeline();
  const headerTL = gsap.timeline()
  const standardTL = gsap.timeline()
  const headerItem = $(".category-header__item")

  headerTL.to(headerItem, {
    ease: 'back',
    autoAlpha: 1,
    duration: 10,
  })
  
  function standardAnim() {
    standardTL.to('.category-bg__standard', {
    autoAlpha: 1,
    scale: 1,
    duration: .6
    }, '<')
    .from('.category-standard__item', {
    ease: 'slow',
    autoAlpha: 0,
    scale: 0,
    duration: 1.8
    })
    .from('.category-title', {
    ease: 'slow',
    autoAlpha: 0,
    y: 70,
    duration: 3.4
    })
  }

  if($('.category-standard')[0]) {
     console.log('Standard')
     standardAnim()
  }

 tl.add(standardTL).add(headerTL)

 

[Moving a DIV off screen and back with a dynamic width.]

I think this would be a good use case for function-based values:

 

[Wave like animation when changing the image on slideshow]

The wavy effects on that site are built with WebGL, likely using something like: https://www.curtainsjs.com/

You could also consider get a similar effect if you animate an SVG filter over an embedded image... Something like:

See the Pen WQyBJb by osublake (@osublake) on CodePen

but with a different filter shape.

[ScrollToPlugin and ScrollTrigger (with scrub) not getting along]

The issue with this is that the horizontal animations are technically part of the scroll. If you try to skip these sections, you'll either have to pass a large blank space (the space the horizontal scrub is actually scrolling when pinned) or you'll have to re-flow the page, which is really difficult to calculate the current/previous/future scroll positions, and browsers don't like to repaint things like this, so there'll likely be some glitchyness.

[How convert this GSAP 2 to GSAP 3]

Everything you need should be in this article.

[Horizontal scroll with "Pin" at the end]

 

No problem! Helpful tip for this sort of animation: when scrubbing sections like this, I like to keep the timing for each "section" segment as `duration: 1` so that it's easy to calculate, the timing for each.

[How convert this GSAP 2 to GSAP 3]

14 minutes ago, teste_brazil_1998 said:

convert this button to my React site

@chrisgannon has a lot of complexities going on in his button. I'd recommend starting simple with your own design and working up from there than just trying to pull a larger complex animation into your site all at once.

[How convert this GSAP 2 to GSAP 3]

The code I provided seems to work for me:

See the Pen PodWOWa?editors=1111 by elegantseagulls (@elegantseagulls) on CodePen

 

Check this out for react:

This is the basics on converting GSAP2 to 3:

 

[Responsive navigation HELP NEEDED!]

I'd probably try to handle a lot of gsap.set() in your css rather than JS. Can you elaborate on what you mean by:

4 hours ago, indy_dln said:

it just seems to work then... not!

 

[How convert this GSAP 2 to GSAP 3]

const tl = gsap.timeline()

tl.to(['.sun', '.moonMask', '.moon'], {
  attr: gsap.utils.wrap([{cx:'-=140', cy:'-=20'}, {cx:'-=140', cy:'-=20'}, {cx:'-=90',  cy:'-=0'}]),
  duration: 1, 
  stagger: yourStaggerAmount // yours is currently none, so you could remove this line
}

Check out GSAP's wrap utility to compare to the old cycle: https://greensock.com/docs/v3/GSAP/UtilityMethods/wrap()

I haven't had my coffee yet, so let me know if this has issues ☕

 

[Constant logs in console.]

10 minutes ago, benji.3s.money said:

You can see from a simple codepen it outputs a lot of logs whenever GSAP does its thing in Firefox Developer

I just tried this in FF Dev, and am not seeing anything gsap realated in the logs. I just updated my browser today, and nothing different. I wonder if you have a setting toggled in your Dev Tools in FF, but I couldn't find any that'd cause this.

[Constant logs in console.]

4 minutes ago, benji.3s.money said:

FireFox developer edition

I use this browser almost exclusively, and have never had GSAP log anything that I wasn't expecting. Can you set up a minimal demo in CodeSandbox or StackBlitz or similar to show this?

 

 

[Parallax effect - have content in original position in the center of the screen]

11 minutes ago, pixelarchitect said:

yPercent to higher values it still is not vertically aligned

Ah yes, that's cause it's taking the transformed position of the element.

 

const parallax50 = gsap.utils.toArray('.parallax50');
parallax50.forEach(lax50 => {
  gsap.fromTo(lax50, {
    yPercent: 50,
  }, {
    yPercent: -50,
    ease: 'none',
    scrollTrigger: {
      trigger: lax50,
      start: "-50% bottom", //top of element (offsetting 50% "from" transform), bottom of viewport
      end: "50% top",  //bottom of element (offsetting -50% "to" transform), top of viewport
      scrub: true,
      markers: true,
    }
  });
});

 

[Parallax effect - have content in original position in the center of the screen]

8 minutes ago, pixelarchitect said:

lax50 is not defined

You'll need to keep that in your original .forEach() loop.

[Parallax effect - have content in original position in the center of the screen]

6 minutes ago, pixelarchitect said:

So in my example the text should be vertical aligned with the other once it reaches the center of the screen

Try this:

 

gsap.fromTo(lax50, { 
  yPercent: 50,
}, {
  yPercent: -50,
  ease: 'none',
  scrollTrigger: {
    trigger: lax50,
    start: "top bottom", //top of element, bottom of viewport
    end: "bottom top",  //bottom of element, top of viewport
    scrub: true,
    markers: true,
  }
})

 

[Horizontal scroll with "Pin" at the end]

1 hour ago, Avenues said:

idea behind a wrap element

This is to prevent a horizontal scroll bar, which can mess things up (transforms vs real scroll).

If you want the box animation to be longer/tied to the pin, you'll maybe want to consider adding it as part of the timeline, and dividing the timeline's duration up to match the ratio of each animation. I updated my codepen to show how this would look:

See the Pen ExegKJN?editors=0010 by elegantseagulls (@elegantseagulls) on CodePen

[Animating text with a gradient on scroll]

Just now, Rodrigo said:

I created a simple example to show how it works

You went above and beyond, though!

[Animating text with a gradient on scroll]

The apple site is adding a position: sticky; to the text, then achieving the gradient effect by animating a mix-blend-mode: darken; colored gradient vertically (in that same sticky container). You could do the same thing with ScrollTrigger and pinning, pretty easily.

Similar to this, but animating a gradient instead of parts of a shoe:

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

[Horizontal scroll with "Pin" at the end]

It looks like you're setting up your horizontal scrollTrigger's CSS/html incorrectly:

You'll need a wrapping container to hide the horizontal overflow. Also, since the horizontal scroll is ending with the '.box' in the center, the end of the scrub will never be completed. 

 

 

Made some small tweaks:

See the Pen ExegKJN by elegantseagulls (@elegantseagulls) on CodePen

 

 

[cannot get dotted path to play]

3 minutes ago, PointC said:

you need a stroked path for that to work

Yep! My response got submitted too early, and then I got distracted. Definitely check out @PointC's tutorials! They are great!

[cannot get dotted path to play]

It looks like maybe your path export isn't setup for drawSVG.

[Feature request: implement animate viewBox in MorphSVGPlugin]

For these sorts of things, I usually just use: overflow: visible!important; on my SVG elements. It'd be a tough ask to try to figure out how to constrain/contain shapes in the viewBox automatically (does the height change, with the width, etc). Also, animating the viewbox can have some performance implications too.

[GSAP Animations lagging (ScrollSmoother + Optimisation?)]

20 minutes ago, DW92 said:

their size is between 400 - 800kb

I'd be less concerned about file-size than I would overall paint size (how much area/screen the image takes up), maybe try just putting a div in the image's place and see if that's the issue.