Jump to content


  • Posts

  • Joined

  • Last visited

NewbieScroll's Achievements

  1. Ahhh I didn't know that ! THANK YOU so much GreenSock super hero
  2. Hi there, I'm experimenting with Scroll Trigger. Below is the code snippet Goal : When the green component enters the third section, I want to add a class 'active' and updates the CSS of green component. However, the code below seems to add 'active' class to the section instead of my green component // HTML below <section> one </section> <section> two </section> <section id="three"> three </section> <section> four </section> <section> fiive </section> <div id="green"> another component </div> // CSS Below section{ border:1px solid black; height:500px; margin: 25px auto; } #green{ font-size:30px; background-color:green; height:50px; width:500px; position:fixed; top:0; } .active{ color:white ; background-color:black; } // JS below gsap.registerPlugin(ScrollTrigger) gsap.to('#green',{ scrollTrigger:{ trigger: "#three", start:'top top', end:"9999", markers:true, toggleClass:"active" }, }) Thanks for your help!!! :))
  3. Hi there, I've downloaded GSAP's ZIP file and inside the minified folder I see there is a corresponding `XXX.min.js.map` file for each `XXX.min.js`. I'm curious what `XXX.min.js.map` file is doing? I've briefly tested it with simple HTML JavaScript set up like below If I only include the `gsap.min.js.map`, the animation won't work. So I wonder what's the purpose of `gsap.min.js.map` ? <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="./gsap.min.js"></script> <!-- <script src="./gsap.min.js.map"></script> THIS DOES NOT WORK--> <link rel="stylesheet" href="style.css" /> <title>Document</title> </head> <body> <div>testing</div> <script> let tl = gsap.timeline(); tl.to("div", { duration: 5, y: 100, backgroundColor: "red", ease: "power2.inOut", }); </script> </body> </html> Thank you!
  4. Hi all, I'm browsing all the topics & resources in GSAP Learning Centre (3 pages total) and I've finished the "Getting Started with GSAP". Is there a particular order I should get through the content next ? I'm curious how you all learn GSAP when you first started. Any YouTube channels / websites you would recommend? I appreciate any learning tips ! Thank you!
  5. THANK YOU SO MUCH !!!! I didn't know that you can return a cleanup function!
  6. Context: I want the counting animation to happen only when the screen size is larger than 1024px So for example, starting number is 30 and the number will increment until the target number 50. However, when I resize the screen the number becomes 30 rather than staying at the target number 50. From the documentation, it seems like the ScrollTrigger will kill the animation and revert to its original state when the media query doesn't match However, is there any way to maintain the final state? I'm using React and here is the code snippet I'm new to this forum and GSAP and thank you in advance for your help and guidance. Here is the code import React, { useEffect } from "react" import { gsap } from "gsap" import { ScrollTrigger } from "gsap/ScrollTrigger" const TestPage = () => { const stats = [{ finalNum: 50, startNum: 30 }] useEffect(() => { gsap.registerPlugin(ScrollTrigger) ScrollTrigger.matchMedia({ "(min-width: 1024px)": function () { ScrollTrigger.create({ trigger: "#counter-trigger", start: "-=350", end: "+=200", markers: true, animation: gsap.from(".mycounter", { duration: 0.55, innerText: stats[0].startNum, snap: { innerText: 1, }, once: true, }), }) }, }) }, []) return ( <div> <div style={{ height: "1000px", backgroundColor: "lightcoral", }} > some stuff here </div> <div my={100} id="counter-trigger"> <span className="mycounter" style={{ fontSize: "80px" }}> {stats[0].finalNum} </span> </div> </div> ) } export default TestPage