Jump to content
Search Community

NewbieScroll

Members

  • Posts

    8

  • Joined

  • Last visited

NewbieScroll's Achievements

  • One Year In
  • Dedicated Rare
  • One Month Later
  • Week One Done
  • First Post Rare

Recent Badges

3

Reputation

  1. NewbieScroll
    Ahh thank you I did try to place `paused:true` inside the timeline but I placed it in defaults 😅 // this works let tl = gsap.timeline({ paused: true, defaults: { duration: 0.6 } }); // I was doing this - I put the paused in defaults ... let tl = gsap.timeline({ defaults: { ease: "back.inOut(0.9)", duration: 0.6, paused: true } });
  2. NewbieScroll started following Timeline play doesn't work
  3. NewbieScroll
    let btn = document.getElementsByClassName(".btn")[0]; let tl = gsap.timeline({ defaults: { duration: 0.6 } }); tl.fromTo(".someClass", { x: 0 }, { x: 300, paused: true }); // but the timeline doesn't play btn.addEventListener("click", (e) => { tl.play() }); I want the element to move when I click the button. Is my code wrong? I couldn't play the timeline when I clicked the button and I'm not seeing any errors in the console. I appreciate your help!
  4. NewbieScroll
    Ahhh I didn't know that ! THANK YOU so much GreenSock super hero
  5. NewbieScroll
    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!!! :))
  6. NewbieScroll
    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!
  7. NewbieScroll
    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!
  8. NewbieScroll
    THANK YOU SO MUCH !!!! I didn't know that you can return a cleanup function!
  9. NewbieScroll
    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
×
×
  • Create New...