blueli

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 https://codepen.io/1101blueli/pen/yLVGbmW

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. https://codepen.io/1101blueli/pen/QWGJPea #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. https://codepen.io/1101blueli/pen/KKNrLde Sorry I cannot explain it more clear. Hope you understand what I am trying to achieve. Many Thanks.

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