Jump to content
GreenSock

Dennyno

Scrolltrigger smooth background from data-attr (or other ways?)

Go to solution Solved by Dennyno,

Recommended Posts

I'm finally ending this scrolltrigger demo and works great.
Hope it may ends under gsap demos :)

I added a data attribute (called simply 'sfondo') to allow scrolltrigger managing sections background, and it works... but it's not smooth. It's jerky.
What am I missing?

Thanks

See the Pen oNoxaVN by DedaloD (@DedaloD) on CodePen

Link to comment
Share on other sites

Hey @Dennyno,

 

You're asking GSAP to animate between a background image and a background color - those are two different properties - the values are also different - a string and a complex layered gradient. GSAP's clever but not that clever I'm afraid.

(Maybe Jack will jump in with some magic) But I would recommend putting the radial gradient in a div and animating the opacity instead.

Simplified version of your pen here so you can see the transition isolated without scrollTrigger and other animations - 
 

See the Pen oNozBZv?editors=0110 by GreenSock (@GreenSock) on CodePen

 



 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

4 minutes ago, Cassie said:

 


Hi @Cassie, so  just swapping all bgs to bg-images should fix it? 

Link to comment
Share on other sites

  • Solution
1 hour ago, Dennyno said:


Hi @Cassie, so  just swapping all bgs to bg-images should fix it? 

 

2 hours ago, Cassie said:

Hey @Dennyno,

 

You're asking GSAP to animate between a background image and a background color - those are two different properties - the values are also different - a string and a complex layered gradient. GSAP's clever but not that clever I'm afraid.

(Maybe Jack will jump in with some magic) But I would recommend putting the radial gradient in a div and animating the opacity instead.

Simplified version of your pen here so you can see the transition isolated without scrollTrigger and other animations - 
 

 

 

 



 

Solved. 
Of course, being the gradients: images for the browser.. it can't tween and imagine what's between each step.
Like a baby image and a man: CSS can't image what's between. LOL shame on me.

Solved just changing the markup and an extra trigger on the first section.

Now push thiisssss under featureddddd Jackkkkkkk @GreenSock ❤️😛 

Ps extra question: is this doable even without data-attr? Just by observing default css bg colours? 
 

  • Like 1
Link to comment
Share on other sites

Quote

Ps extra question: is this doable even without data-attr? Just by observing default css bg colours? 


Not sure what you mean by this and there's a lot of code to sift through in your demo, but sure, you could definitely do this without data attributes.

Link to comment
Share on other sites

Just now, Cassie said:


Not sure what you mean by this and there's a lot of code to sift through in your demo, but sure, you could definitely do this without data attributes.


Nope.. I meant.. not on the actual demo.
All the demos seen on the forums talks about data-attr.
So I was willing to understand if there was a reason behind it, as I think that just fetching the bg color from the element stylesheet should be faster I guess...

Link to comment
Share on other sites

I'm not sure what you meant by 'fetching the bg color from the element stylesheet' or "default CSS bg colours' I'm afraid.

 

A data attribute is just an easy way to create an accessible bit of data that's linked with a particular element.

If your element's background color is red and you want to change it to something new, you could store that new colour in a data attribute and then access it in your JS, or simply just decide what color it should be using some logic in your JS and skip the data attribute entirely. It's not a necessity, just a technique.

Link to comment
Share on other sites

16 minutes ago, Cassie said:

I'm not sure what you meant by 'fetching the bg color from the element stylesheet' or "default CSS bg colours' I'm afraid.

 

A data attribute is just an easy way to create an accessible bit of data that's linked with a particular element.

If your element's background color is red and you want to change it to something new, you could store that new colour in a data attribute and then access it in your JS, or simply just decide what color it should be using some logic in your JS and skip the data attribute entirely. It's not a necessity, just a technique.


I meant by the CSS itself, but anyway I guess that with attributes, if anyone here is using them, should be easier at the end... :D
 

section {background:red}
section2{background:blue}
section3{background:black}


 

Link to comment
Share on other sites

It's a little more complicated to read rules in a stylesheet that aren't attached an element, but if you wanted to go the stylesheet route, I would just put what you want in CSS variables, kind of like this.

 

:root {
  --section1: red;
  --section2: blue;
  --section3: black;
}

 

Then you can get the color using gsap.getProperty().

 

let color = gsap.getProperty("html", "--section1");

 

  • Like 1
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.
×