Ihatetomatoes

Thanks for putting together the Codepen. I am getting this error: Uncaught SyntaxError: Unexpected token '<' There seems to be an issue with your syntax. I am short on time now to find the typo or the unclosed tag. Make sure your codepen works without gsap first, then we can help with any gsap related issues.

Hi, the GSAP warning is because of your selector. .text p .hidetext does not exist on the page and GSAP can not animate it. Update your selector to match your html .text span.hidetext. The images not loading issue has nothing to do with GSAP. You are including some hover effect, that does not exist in the Codepen. <script src="dist/hover-effect.umd.js"></script>

Hi Rick, I don't see much wrong with your ScrollTrigger but you are not using useRef to target your elements, which I think might be the issue. This guide might help: https://ihatetomatoes.net/react-and-greensock-tutorial-for-beginners/ Once you update your code to use useRef it would be great if you create a demo using https://codesandbox.io/ That way we can see if/what is wrong with your GSAP or ScrollTrigger code.

I can't fork your CodePen, but this will work. Remove your initPortfolioSec from the init function and initiate it after you remove the .is-loading class. function initLoader() { const loader = gsap.timeline({ ... onComplete: () => { select("body").classList.remove("is-loading"); initPortfolioSec(); } }); } function initPortfolioSec() { // do your ScrollTrigger magic here } function init(){ initLoader(); } window.addEventListener('load', function() { init(); }); Hope that helps.

Hey @RobbieC, why don't you initiate your ScrollTrigger effects after you remove the .is-loading class? That way all the necessary elements will be on the page and will be used to calculate the right offsets. In your loader onComplete is the best place.

Hi, useEffect can fire only once if you specify an empty array as it's dependency. useEffect({ ... }, []) Also you are not using useRef() to target your elements, check out the guide below. https://ihatetomatoes.net/react-and-greensock-tutorial-for-beginners/ Hope that helps.

Hi Destrovi, if I understand correctly you want to prevent the user from scrolling while the initial animation is happening? You can give the body or another wrapper element a class .is-loading and then use GSAPs onComplete callback to remove the class when the animation is done. onComplete: () => document.querySelector('.content').classList.remove('is-loading') https://codepen.io/ihatetomatoes/pen/bGpNPPY Hope that helps. Cheers Petr

Hi @Durostorum and @Zach, I see that you were talking about Rect + GSAP course. At the moment I am finalizing Practical GreenSock that will be purely with GSAP3, ScrollTrigger and vanilla JS. Durostorum I know this won't be very helpful, but I suggest you start with a simple ScrollTrigger in React first, copy and paste from other demos is not the best way to learn. @Zach pointed you to my tutorial where you can learn how to target elements in React using useRef, hope it is useful.

Given that you have your container with a fixed height, you can give your images a fixed width to get around it.

I don't have any resource that I could direct you to. But I am sure there are some npm packages tackling lazy loading or preloading images. From a GSAP perspective your ScrollTrigger demo works as expected.

I think there is an issue on the first load because you are not preloading the images. That means that they have no width when ScrollTrigger is initiated.

Not sure if this is the effect you are trying to create but the horizontal scrolling and triggering is working for me. https://codesandbox.io/s/infallible-black-7prsh By default ScrollTrigger uses the viewport as the scroller (the element that has the scrollbar). In your case I had to add .scroller class to your SliderContainer and add it to the scrollTrigger config. scrollTrigger: { id: `section-${index + 1}`, scroller: ".scroller", trigger: el, start: "left", toggleActions: "play none none none", horizontal: true } Sorry I can't view this on a phone right now. Hope it helps.

Hi, can you create a Codepen demo? It's hard to help if we don't know what error are you getting. Is the issue in React or GSAP? Codepen demo would help us to help you. Cheers

Do you have the latest version of the plugin? ScrollerProxy has been added recently.

Hi, Smooth Scrollbar can work with ScrollTrigger. You need to use the ScrollTrigger.scrollerProxy() to keep ScrollTrigger and Smooth Scrollbar in sync. Here is a simplified code example how it should be done. // init Smooth Scrollbar with options let bodyScrollBar = Scrollbar.init(selector, options); ScrollTrigger.scrollerProxy("body", { scrollTop(value) { if (arguments.length) { bodyScrollBar.scrollTop = value; } return bodyScrollBar.scrollTop; } }); // update ScrollTrigger when scrollbar updates bodyScrollBar.addListener(ScrollTrigger.update); Hope that helps.

Hi @vino3d, welcome to the forum. Of course what you could do with ScrollMagic you can now do with ScrollTrigger and much more. As you mentioned that you are trying to learn I would direct you to the ScrollTrigger starting guide by @Carl. It has few simple demos that would get you started, I think that is the best way to learn. By building few simple demos with ScrollTrigger you will see how animations are triggered and you will be able to build the animation as in your example in no time. I have also GreenSock 101 online course that covers the basics of GSAP3 and ScrollTrigger that might help. Cheers Petr

Works like a charm Jack, thanks for the update. When will the next release be available on CDN?

Make sure that the elements you are trying to animate are on the page. I can't see .ball or h2.title in you screenshot above.

Hi @hugoyong, I am not familiar with Divi, but there is a standard way how to include custom js in your theme. Official WP documentation on including JS https://developer.wordpress.org/themes/basics/including-css-javascript/ To ensure compatibility and prevent conflicts it is recommended to load custom js from your functions.php file. This will make sure that all js files are loaded in the right order. On your screenshot above it should probably be something like this: <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/gsap.min.js" /> <script type="text/javascript"> gsap.to(...); </script>

Great to hear that it was useful😀

Hi Federica, we went through GSAP only smooth scrolling in another forum thread. Here is the final demo. I have also added a scrolltrigger for each box and all markers are aligned correctly even with the smooth scrolling. https://codepen.io/ihatetomatoes/pen/PoZLpbp Please note that smooth scrolling or scrolljacking is not something ScrollTrigger has been build for, but as you can see from the above it is doable. Scroll responsibly

Hi @FearMe4va, see the below example how to loop over all links and create mousenenter and mouseleave for each of them. https://codepen.io/ihatetomatoes/pen/RwrvdmW The example above works fine and also uses GSAP3 syntax instead of old GSAP2. const buttons = document.querySelectorAll('a'); buttons.forEach(button => { const letters = button.querySelectorAll('a span'); // Timeline const tl = gsap.timeline({paused: true}); tl.to(letters, { duration:1, color: 'black', ease: Expo.easeOut, stagger: 0.02 }); // HOVER button.addEventListener("mouseenter", function(){ tl.play(); }); button.addEventListener("mouseleave", function(){ tl.reverse(); }); }); Hope that helps with your GSAP question. The rest is only your CSS. Happy tweening.

I have a question regarding the styles applied to an element that is pinned with the pinReparent: true. In the codepen demo, the first item in the navigation has a class .is-active and is green. The issues When the navigation is pinned with pinReparent set to true, the active link is white and not green, even through the styles are still applied. Any idea why this is happening? And what are all the styles applied to the pinned element with pinReparent option? Lastest Chrome on Mac. PS: I know this demo would work with simply not including the pinReparent option, but I am just showing a simplified demo of an issue that I am facing on a bigger project.

As @ZachSaucier a Codepen would be useful, it's hard to help when we don't know what error you are getting. const TheCircle: React.FC<Props> = ({ datum, xScale, yScale }) => { ... let dotRef = useRef(null) useEffect(() => { gsap.to(dotRef.current, {...}) }, [xScale]) // specify here which of the updated props should trigger this tween return ( <g> <circle ... ref={dotRef} /> </g> ) } The above code should work.

That's exactly what the array of refs is used for. You can loop over all the elements inside of each loop and create one ScrollTrigger that will be applied to all elements, but for each element individually. Are you trying to avoid writing ref="something"? So if gsap .toArray worked wouldn't you still need to give your elements a specific class? className="something"?