CSSRule not working in a timeline

[Daniel Hult]

Hey guys,

I made an image reveal effect and have an intersection observer that runs a master timeline that reveals an image and scales it. The reveal effect is done by using the CSSRule plugin, but it's happening on page load rather than inside the master timeline as expected. Am I doing anything wrong here?

Also wondering (since I know especially @OSUblake is super good with scroll things - I've seen your replies to ScrollMagic problems ?) is it a good idea to have an intersection observer in a for each loop? Don't know if this is a good solution or if there is a better way to do it  

See the Pen xxxBoxv by daniel-hult (@daniel-hult) on CodePen

[ZachSaucier]

Hey Daniel.

 

A couple things going on here:

• IntersectionObserver fires the listener function on load (to check if anything is in view). The first image is in view so it plays its timeline.
• CSSRulePlugin affects the actual stylesheet so unless you are changing style rules that only affect one element, the changes are going to happen to every element who is affected by that rule. (I just explained this not too long ago in another thread)

Thus your black reveal is revealing all of them because the actual stylesheet is being changed which affects all elements that the rule applies to. To work around this you could either 1) make different stylesheet rules for each element and change those or 2) use an actual element so that you don't have to use CSSRulePlugin. That way you can scope which one should be animated in at that time.

[Daniel Hult]

Ahh, okay! Best to use an actual element then  Thanks for the explanation!