Pete G

Hi there, Sorry I should have said WordPress Gutenberg Block editor.

Hi there, While I have a basic understanding of HTML and CSS is there any guidance for beginners like myself on using GSAP on a WordPress site using Gutenberg blocks. I would love to learn how to do this: Further down...mikel suggestions and provides samples. I am of course not ready to tackle this yet however keen to learn. From mikel's suggestions I can see the HTML setup and can see why the CSS is there. Its taking apart this so that the elements works on a WordPress page using rows and blocks which of course can have CSS classes etc. I understand some of what is being done and why (watching many videos on this site and Creative Coding Club) ....I just have no way of knowing how to get this onto a WordPress page. Any direction would be great. Thank you. Pete

Hi @ZachSaucier Thank you for your thoughts. The code given below is all we have after following various tutorials. It's all working on the page and we are happy with it however the error a concern. It only shows in the builder and not on the page. To create a demo of what we have created in Oxygen would take me hours, I am very out of practice creating something with HTML & CSS, I guess this the result of using builders for years. If the code is of no use, I guess we either live with the error or bin the idea which would be a shame. Thanks again <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script> jQuery(document).ready( function() { gsap.registerPlugin(ScrollTrigger); gsap.to("#section-2-107", { scrollTrigger: { trigger: "#section-2-107", start: "10% 100%", end: "45% 60%", toggleClass: "bg-change-2a" } }); gsap.to("change",{ scrollTrigger: { trigger: "#section-2-107", start: "10% 100%", end: "45% 60%", toggleClass: "black" } }); gsap.to("#section-1813-107", { scrollTrigger: { trigger: "#section-1813-107", start: "10% 11%", end: "88% 90%", toggleClass: "bg-change-2a" } }); gsap.to("change",{ scrollTrigger: { trigger: "#section-1813-107", start: "10% 11%", end: "88% 90%", toggleClass: "black" } }); })

Hi there, Still finding my way with GSAP and very slowly watching a ton of videos and trying new things out. Using Oxygen on a dev site, we have two effects where the background color changes as you scroll, this in two sections. Essentially two separate effects in one code block, as below. The issue, it works fine however I do see an error and can't for the life of me work out why. Any advice would be gratefully received regarding the error or the code I am using. Many thanks. ReferenceError: gsap is not defined on line #2 jQuery(document).ready( function() { gsap.registerPlugin(ScrollTrigger); gsap.to("#section-2-107", { scrollTrigger: { trigger: "#section-2-107", start: "10% 100%", end: "45% 60%", toggleClass: "bg-change-2a" } }); gsap.to("change",{ scrollTrigger: { trigger: "#section-2-107", start: "10% 100%", end: "45% 60%", toggleClass: "black" } }); gsap.to("#section-1813-107", { scrollTrigger: { trigger: "#section-1813-107", start: "10% 11%", end: "88% 90%", toggleClass: "bg-change-2a" } }); gsap.to("change",{ scrollTrigger: { trigger: "#section-1813-107", start: "10% 11%", end: "88% 90%", toggleClass: "black" } }); })

I think I'll try GSAP to add simple scroll movement to more straight forward layouts within Oxygen, this seems to work fine. I guess like many on here, time and experimenting will win the day. Thanks again.

Thank you both for your feedback. Decided to bin this. My bad and rushed attempt at adding an example here probably made things less clear than they were. Using Oxygen is pretty straight forward however trying to add a little creativity is proving 'far more trouble' than it's worth. Frustrating to say the least. I do however appreciate your time and suggestions. Time to forget GSAP for the time being. Take care.

Hi there Zach, Thanks very much for your reply. The reason I am trying to use GSAP is, as with HTML, I have been using builders for years, I used to be able to build using Dream Weaver in its early days. Now using Oxygen attempting to expand my knowledge. My HTML isn't great however, this demonstrates very roughly the issue: https://codepen.io/PeteNorfolk/pen/qBaJqNw HI have a column on the right, in local, that's an image. On the right a text block. This I am trying, as you said to make sticky, but would prefer to use GSAP, I have the time and wish to use other scroll effects if I can get my head round it. At the very beginning of this video, is what we are trying to do....BASIC Agency. I tried end: "bottom bottom" and this didn't work. Again, thank you for the welcome and response.

Hi there, I'm very new to using GSAP so forgive if this all looks a little basic. I have followed a ton of videos, more especially these: https://www.youtube.com/watch?v=FH0B3Gdm0P0&ab_channel=TheCodeCreative&fbclid=IwAR04hfqGn4cCVqbE5QICgDUY4EXX6oKRD6Gt7tqUZ2QweL75GGVQnlqNhzA I use Oxygen and wishing to pin a text block in a div. If I use the code below it works fairy well however; Is there a way of setting the end so the text block bottom, stops at the end of the column? I set end to 700 and sure it works, but on mobile devices the columns are smaller so this breaks. I have tried all kinds to overcome this, I guess I'm missing something obvious...hopefully. Any thoughts would be great :) gsap.to("#div_block-2009-153", { scrollTrigger: { trigger: "#text_block-1902-153", start: "top 20%", end: "700 10%", markers: true, pin: "#text_block-1902-153" } });