Animation play on load, but then switch off to toggle control

[Ian Robinson]

I've been battling with this for a couple of days trying to figure out how to have the .logo-icon animation initially run forward on page load, then when the user scrolls down it plays in reverse (while the .bottom-bar slides up), and when the user scrolls back up to the top the .logo-icon plays forward again as the .bottom-bar slides down.

In summary, the dots slide in when visiting, then slide away as the bottom bar slides on top of them when the user scrolls down and returns when they scroll back up to the top.

*also a bonus if someone can figure out why the last dot that comes on lingers longer than the rest

See the Pen poGmLxe by ilrobinson (@ilrobinson) on CodePen

[Rodrigo]

Hi,

 

Maybe something like this:

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

 

You also have this in your CSS:

ul.flex-contact li {
  transition: 0.5s ease;
}

That transition property will default to every css property that is updated and can also be animated, so that is going to create a few problems of it's own. Seems like you want to scale and change the background color of the dots, just use GSAP in order to avoid issues:

contactIcons.forEach((icon) => {
  gsap.set(icon, { xPercent: "-100", opacity: 0 });
  const t = gsap
    .to(icon, {
      scale: 1.2,
      transformOrigin: "center center",
      backgroundColor: "#fff"
    })
    .reverse();
  icon.addEventListener("mouseenter", () => t.reversed(!t.reversed()));
  icon.addEventListener("mouseleave", () => t.reversed(!t.reversed()));
});

Hopefully this helps.

Happy Tweening!

[Ian Robinson]

Yes! Thank you! I felt I was overthinking it after a while then completely forgot I added transitions in CSS as it started as just a basic animation prior then switched to GSAP for more complexity.