can ScrollTrigger / data-scrollcolor use gradients ?

[Dcoo 6 Likes (Newbie)]

is it possible for scrollColorElems to use gradients?

 

html

<div id="section1" class="mymodeheader-newmods mytop"><img class="hero__image" data-scrollcolor="linear-gradient(90deg, #46224e 0%, #30184f 85%)" ) src="https://parkviewhomes.info/energy-star/banner-top-01.svg" alt="" /></div>

 

 

window.addEventListener("load", function () {
  const scrollColorElems = document.querySelectorAll("[data-scrollcolor]");
  scrollColorElems.forEach((colorSection, i) => {
    const prevColor =
      i === 0 ? "#1b1521" : scrollColorElems[i - 1].dataset.scrollcolor;
    ScrollTrigger.create({
      trigger: colorSection,
      start: "top   bottom",
      onEnter: () =>
        gsap.to("body", {
          backgroundColor: colorSection.dataset.scrollcolor,
          overwrite: "auto"
        }),
      onLeaveBack: () =>
        gsap.to("body", { backgroundColor: prevColor, overwrite: "auto" })
    });
  });
});

 

See the Pen PopPqPO by davicoo (@davicoo) on CodePen

[Cassie 5,408 Likes (Superhero)]

Here's a forum post that should help you ☺️
 

Shout if we can help to clarify anything.

[Dcoo 6 Likes (Newbie)]

I'm not sure that helps  but good to know.  ...I still can't tell if gradients with  data-scrollcolor  think I have here ? 
 

data-scrollcolor="linear-gradient(90deg, #46224e 0%, #30184f 85%)" )

 

gsap.registerPlugin(ScrollTrigger);

window.addEventListener("load", function () {
  const scrollColorElems = document.querySelectorAll("[data-scrollcolor]");
  scrollColorElems.forEach((colorSection, i) => {
    const prevColor =
      i === 0 ? "linear-gradient(90deg, #46224e 0%, #30184f 85%)"" : scrollColorElems[i - 1].dataset.scrollcolor;
    ScrollTrigger.create({
      trigger: colorSection,
      start: "top   bottom",
      onEnter: () =>
        gsap.to("body", {
          backgroundColor: colorSection.dataset.scrollcolor,
          overwrite: "auto"
        }),
      onLeaveBack: () =>
        gsap.to("body", { backgroundColor: prevColor, overwrite: "auto" })
    });
  });
});

 

[OSUblake 18,495 Likes (Superhero)]

What did you try?

 

1 hour ago, Dcoo said:

So you can't use gradients with ScrollTrigger / data-scrollcolor ? 

 

Get a tween working first. Add in the more complicated stuff later.

 

[Cassie 5,408 Likes (Superhero)]

Ah, yeah. I assumed there was a bug causing an issue. This is actually *mega cool* I had no idea GSAP could animate gradients this simply.

In my head they were a binary background property that couldn't be animated and I assumed we'd need some extra assistance with them

BUT look, it's just animating like pure magic!

Here - very simplified pen to show you (this is what we mean when we ask for a reduced test case.) Simplified code makes it a lot easier to work out what's going on.

See the Pen a565a64ed971eadafd29a4c932ae9d05?editors=1010 by cassie-codes (@cassie-codes) on CodePen

[Cassie 5,408 Likes (Superhero)]

😍 so beautiful. Gosh GSAP is just THE BEST. Learn a new thing every day.

[Cassie 5,408 Likes (Superhero)]

I just had to go back and try animating with CSS for my sanity and I'm not going mad. This is indeed magic.

See the Pen 20d1099a0e2bcda17c41c7e2e4561edc by cassie-codes (@cassie-codes) on CodePen

[Dcoo 6 Likes (Newbie)]

when I use a hex it works great, I was just wondering is it could do  gradients as well 

I tried this but it failed badly :)

gsap.registerPlugin(ScrollTrigger);

window.addEventListener("load", function () {
  const scrollColorElems = document.querySelectorAll("[data-scrollcolor]");
  scrollColorElems.forEach((colorSection, i) => {
    const prevColor =
      i === 0 ? "linear-gradient(180deg, #FBD786 0%, #f7797d 85%)" : scrollColorElems[i - 1].dataset.scrollcolor;
    ScrollTrigger.create({
      trigger: colorSection,
      start: "top   bottom",
      onEnter: () =>
        gsap.to("body", {
          backgroundColor: colorSection.dataset.scrollcolor,
          overwrite: "auto"
        }),
      onLeaveBack: () =>
        gsap.to("body", { background-image: prevColor, overwrite: "auto" })
    });
  });
});

 

[Dcoo 6 Likes (Newbie)]

1 hour ago, OSUblake said:

What did you try?

 

 

Get a tween working first. Add in the more complicated stuff later.

 

Using a hex color it works great, I'm just not sure if using gradients is possible 

[OSUblake 18,495 Likes (Superhero)]

@Cassie just posted a demo.

 

See the Pen a565a64ed971eadafd29a4c932ae9d05 by cassie-codes (@cassie-codes) on CodePen

 

The other thread she linked also shows different ways to animate gradients.

 

[Dcoo 6 Likes (Newbie)]

3 hours ago, Cassie said:

Here's a forum post that should help you ☺️
 

Shout if we can help to clarify anything.

Thank you for the reply, and i'm sorry if I came off rude. have a great day