Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Dcoo

can ScrollTrigger / data-scrollcolor use gradients ?

Recommended Posts

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

Link to comment
Share on other sites

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

Shout if we can help to clarify anything.

  • Like 2
Link to comment
Share on other sites

  • Dcoo changed the title to can ScrollTrigger / data-scrollcolor use gradients ?

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" })
    });
  });
});

 

Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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" })
    });
  });
});

 

Link to comment
Share on other sites

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 

Link to comment
Share on other sites

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 :)  

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×