Jump to content
GreenSock

Search the Community

Showing results for tags 'useref'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 2 results

  1. I put an <a> tag for project on the navbar, as I click "project" it will scroll me to the section by its id. I wonder if this function conflicts with scrolltrigger function causing the issue or not. I have a few React components on the top of this project component. import "./Project.scss" import ProjectList from "./ProjectList/ProjectList" import { projectdata } from "./ProjectData.js" import { useEffect, useRef } from "react"; import { gsap } from "gsap/all"; import { ScrollTrigger } from "gsap/ScrollTrigger" export default function Project() { gsap.registerPlugin(ScrollTrigger); const listRef = useRef(null); useEffect(() => { gsap.fromTo(listRef.current, { y: "100%", opacity: 0 }, { y: "0%", opacity: 1, duration: 2, scrollTrigger: { trigger: listRef.current, markers: true, }, }); }) return ( <div className='project' id='project'> <h1>Project</h1> <ul> {projectdata.map((project, index) => ( <ProjectList {...project} key={index} ref={listRef} /> ))} </ul> </div> ) }
  2. Hi there, I am running into an odd issue with my React site and using GSAP. Website: https://gpstaging.netlify.app For all the scroll based triggers, if I resize the window they will either disappear https://take.ms/6VGoD or not fire their animation when scrolling down the page. It looks like they disappear because an inline style of opacity: 0 and visibility: none is getting applied to them. But I have no idea why and even when I removed all the other components that had GSAP animation applied, the styles keep showing up. Here is a simplified demonstration of the items disappearing once the window get's resized a few times. https://codesandbox.io/s/festive-feistel-puiib?file=/src/App.js For the full production code version, please see the below Github link. https://github.com/GedalyaKrycer/gedalyakrycer.github.io/blob/gsapBackup/gk-portfolio/src/components/Bio/index.js I suspect I am not using the useRef correctly and maybe there is issues with having multiple components that have GSAP on it. But I am not sure how to troubleshoot it. Much appreciation for any insight. Gedalya
×