[Attempt at recreating an interesting text reveal]

6 hours ago, Rodrigo said:

Shouldn't really matter, the only suggestion we have around here when it comes to transforms is to always use GSAP for setting initial values that later you will animate with GSAP, perspective shouldn't be affected by setting it with CSS or GSAP.

 

Finally remember to add a Z value in the transform origin, because right now your rotations are just in 2D:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

 

Happy Tweening!

I removed the Z rotation since I couldn't make it work. Do you even think they used it? I honestly can't tell if my animation is the same as theirs.

Also, I could use help with FUOC on the title...

[Attempt at recreating an interesting text reveal]

8 hours ago, Rodrigo said:

Hi,

 

Looks nice. The only change I'd do is to use yPercent instead of a percentage string:

gsap.from(lines, {
  yPercent: 100,
  rotationX: -90,
  rotationY: -30,
  duration: 0.5,
  ease: "power2.out",
  stagger: 0.08,
  transformOrigin: "center left"
});

Also in order for rotations on the X and Y axis to take effect you need to add perspective and a z value in the transform origin. I'd recommend you to read this article by David DeSandro on the subject:

https://3dtransforms.desandro.com/

 

Hopefully this helps.

Happy Tweening!

Thanks Rodrigo ❤️

You are correct, better to use yPercent. Regarding the perspective, it was added to the "container" div which is the animated text's parent. Do you think it's better to add it using gsap.set?

[Attempt at recreating an interesting text reveal]

I recreated initial text reveal animation from AROCK’s website and am pleased with the result. Any thoughts on optimization or suggestions for improvement? Do you think their approach was similar?

 

See the Pen rNbbRje by fantaz (@fantaz) on CodePen

[Trouble with full screen React slider]

Hi!

So I'm trying to code a full screen React slider and I'm having issues with the animation.

I want the next slide to slide up OVER the currently active slide, and when the final slide is reached, first slide should again start sliding from the bottom.

Honestly I'm not sure which path to take. I thought about manipulating z-indexes; make the current slide's z-index 2, next slide to have z-index 3, previous slide 1...

I tried to wait until current animation completes, then translate on the y axis the previous slide to 100%.
But to no avail.

Here is a link to StackBlitz. That's what i have so far. Thanks for any help.

 

[Automatic vertical scroll pausing and resuming - Next.js, scrollTo]

I added a text slide up animation to the code and made it work so that each appearing line pushes up those before it. Is there a better way to do this?
Here's the code once more:

 const sloganArr = gsap.utils.toArray(".slogan");
      const tl = gsap.timeline();

      sloganArr.forEach((slogan, i) => {
        const tl2 = gsap.timeline({ paused: true });

        tl2.to(sloganArr.slice(0, i), {
          y: `-=50`,
          duration: 1,
        });

        tl.from(slogan, {
          y: 50,
          duration: 1,
          autoAlpha: true,
          onStart: () => {
            tl2.play();
          },
        });
      });

Codesandbox is here.
 

[Automatic vertical scroll pausing and resuming - Next.js, scrollTo]

I started working on a project and have encountered an obstacle. I wanted to make a flex div automatically scroll to bottom. Is there a way to pause automatic scrolling if the user scrolls that div using mouse wheel up/down? Is there a way to resume scrolling from current position after a short delay if the user stops scrolling?

Here is a minimal demo on codesandbox.

Thanks!

[Change logo color over certain sections - Next JS]

yeah, minimal demo is in the first comment

[Change logo color over certain sections - Next JS]

I've changed the code a bit to include changing hamburger menu background color when scrolling over dark sections, but it's not working.

What am I missing?

 

useIsomorphicLayoutEffect(() => {
    let ctx = gsap.context(() => {
      const logo = logoRef.current;
      const menu = menuRef.current;

      tl.current = gsap
        .timeline()
        .to(logo, {
          color: "#ffffff",
          paused: "true",
        })
        .to(menu.children, {
          backgroundColor: "#ffffff",
          paused: "true",
        });
      sections.forEach((section) => {
        ScrollTrigger.create({
          trigger: section,
          onEnter: () => tl.current.play(),
          onEnterBack: () => tl.current.play(),
          onLeave: () => tl.current.reverse(),
          onLeaveBack: () => tl.current.reverse(),
          start: "top 70",
          end: "bottom 85",
        });
      });
    }, headerRef);

    return () => ctx.revert();
  }, []);

 

[Change logo color over certain sections - Next JS]

21 hours ago, Rodrigo said:

Hi,

 

The reason the toArray method is not working because you have that inside a GSAP Context instance that has a scope defined:

let ctx = gsap.context(() => {
  const darkSections = document.querySelectorAll(".dark-section");
  const darkSectionsArr = Array.from(darkSections);

  let sections = gsap.utils.toArray(".dark-section");
  console.log(sections) // <- []
  console.log(darkSections) // <- NodeList[...]
}, headerRef);// <- this is your scope for GSAP Context

So the toArray method is looking for all the elements with the dark-section class inside that scope, not outside.

 

This works the way you intend:

// Doesn't take into account the scope now
let sections = gsap.utils.toArray(".dark-section");
let ctx = gsap.context(() => {
  const darkSections = document.querySelectorAll(".dark-section");
  const darkSectionsArr = Array.from(darkSections);

  console.log(sections)// <- [section.dark-section,...]
  console.log(darkSections)// <- NodeList[...]
}, headerRef);

Hopefully this clear things up.

Happy Tweening!

this makes perfect sense! thank you so much.

[Change logo color over certain sections - Next JS]

Yes, this is it.

Any idea why the gsap method isn't working? Maybe because these classes are in different components?

gsap.utils.toArray(".dark-section");

[Change logo color over certain sections - Next JS]

Thank you for the welcome

I've fixed the link now, don't know how this happened.

[Change logo color over certain sections - Next JS]

Hi!

I'm a newbie using gsap and I would like to get some help regarding an issue mentioned in the post title.

I wanted to change the logo color when the user scrolls over a section which has class "dark-section", but I can't get it to work.

I've seen people using "gsap.utils.toArray('.classname')" method but here it does nothing. Instead, I'm using pure JS "Array.from" method. Does anyone know why this is happening? Scroll Trigger markers are being displayed correctly  so I guess that part works.

Here's a code sandbox link with my code.

Any help is appreciated ❤️