How to set multiple css class for the trigger properly?

[blueli 0 Likes (Newbie)]

Hello.. So I have Post 1 which have a full/wide width images. I want to apply the opacity for the social share icon on the sidebar to be "0" when it hits on the images and when hitting the end of the article it is going to remain opacity=0,

Therefore I have 3 css class for the 3 triggers

.alignwide

.alignfull

.sidebar-social-wrap

 

And here is my code. please take a look at the attached images.

The code works well on the Post 1 which has a full/wide width images in the post. contain the class  .alignwide and .alignfull in the page.

 

But the Post 2 do not have any images. so therefore there is no css class '.alignwide' or .'alignfull'. It seems to make the opacity set to 0 when the post is loaded.

May I know how to do it properly? 

Thanks.

 

 

Post 1

https://bit.ly/3sbM4V1

Post 2

https://bit.ly/3bvU7GM

 

 

Sorry I dont know how to use codePen

So I guess I will just paste my code here.

 

gsap.registerPlugin(ScrollTrigger);

gsap.to(".sidebar-social-wrap", {
          duration: .1,
         opacity:0,
          scrollTrigger: {
            trigger: ".alignwide",
            start: "top 650px",
            end: "bottom 150px",
            toggleActions: "play reverse play reverse", 
      }
});
gsap.to(".sidebar-social-wrap", {
          duration: .1,
         opacity:0,
          scrollTrigger: {
            trigger: ".alignfull",
            start: "top 650px",
            end: "bottom 150px",
            toggleActions: "play reverse play reverse", 
      } 
});
gsap.to(".sidebar-social-wrap", {
          duration: .1,
         opacity:0,
          scrollTrigger: {
            trigger: ".content-end-row",
            start: "top 650px",
            end: "bottom 550px",
            toggleActions: "play reverse play reverse", 
            scrub: true
      }
});

[ZachSaucier 7,151 Likes (Superhero)]

Hey blueli and welcome to the GreenSock forums.

 

There's very likely some logical issues going on here. If you'd like additional help, please make a minimal demo using CodePen so that we can more easily focus on the issue at hand. By following the linked post, it's easy to create. Often times it's helpful to recreate the situation from the ground up using only a few colored divs. 

[blueli 0 Likes (Newbie)]

Hi Alright I managed to create a demo on codepen

 

Two Questions here

#1 I have 3 css class for the trigger and I am wondering am I doing it properly?

So this is what I am trying to achieve, which it works fine

There are 2 elements. Blue and Red Block are representing images. 

I want the social icon block opacity:0 when hitting them, and resume opacity:1 when leaving.

At the end there is a Black block representing the end of the article. 

social icon block remain opacity:0 till the end of the page.

See the Pen QWGJPea by 1101blueli (@1101blueli) on CodePen

 

 

#2 Same code, but when the page has no images div (without the class .alignfull and .alignwide). Then the JS is not working properly. As you can see the social icon block suppose to be visible when the page is loaded. But it is not. Only back to be visible when you scroll it all the way down passing the Black block and go back.

See the Pen KKNrLde by 1101blueli (@1101blueli) on CodePen

 

Sorry I cannot explain it more clear. Hope you understand what I am trying to achieve. 

Many Thanks.

 

[ZachSaucier 7,151 Likes (Superhero)]

Thanks for the minimal demos.

 

The main issue is because the triggers for the first couple of ScrollTriggers don't exist. There are a lot of ways of dealing with that. One is to not include the code that generates them, i.e. serve different JS files depending on the page. Another alternative is to conditionally generate them based on whether or not the trigger element exists. 

 

Side note: Your end value for the third ScrollTrigger in the second demo is before the start, hence why it jumps to the end state instead of animating there.

[blueli 0 Likes (Newbie)]

Thanks! I have found a way to do it.

However one more question. There are multiple elements, so I modify the code. added const soical = gsap.utils.toArray('.alignwide'); 

Seem OK on codepen. But When I paste is on my wordpress site.

It show a warming "uncaught syntaxerror: Identifier 'social' has already been decleared on line #1" 

May I know what did I do not correctly?

 

Thanks

 

See the Pen yLVGbmW by 1101blueli (@1101blueli) on CodePen

[akapowl 5,215 Likes (Superhero)]

 

My guess would be that you have already declared the const social somewhere before in your code and are now trying to re-declare it.

 

"The value of a constant can't be changed through reassignment, and it can't be redeclared."

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const