Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

modulareverything

Members
  • Posts

    19
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

modulareverything's Achievements

  1. Thanks @elegantseagulls — the solution was to register the plugin and move scrollTrigger (not ScrollMagic as you rightly pointed out) to the second object in the fromTo. Updated/working component below for anyone referencing this in the future: import React, { useLayoutEffect, useRef } from "react"; import PropTypes from "prop-types"; import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger.js"; // --- const AnimateIn = ({ children, className }) => { const ref = useRef(null); gsap.registerPlugin(ScrollTrigger); useLayoutEffect(() => { gsap.fromTo( ref.current, { opacity: 0, y: 32, }, { scrollTrigger: ref.current, opacity: 1, y: 0, duration: 1, stagger: 0.2, } ); }); return ( <div ref={ref} className={className}> {children} </div> ); }; AnimateIn.propTypes = { ref: PropTypes.node.isRequired, className: PropTypes.string, }; AnimateIn.defaultProps = { className: null, }; export default AnimateIn;
  2. I tried this but to no avail I noticed in the console just now that it's giving me this error: Missing plugin? gsap.registerPlugin()
  3. Hi everyone, I'm trying to create a React component that wraps around other components (ie. `children`) and animates them in as they appear in the viewport using ScrollMagic ScrollTrigger. It's working, but the problem I'm having is all of the components are animating in at the same time and I was wondering if someone could explain where I'm going wrong? Here's my component: import React, { useLayoutEffect, useRef } from "react"; import PropTypes from "prop-types"; import gsap from "gsap"; // --- const AnimateIn = ({ children, className }) => { const ref = useRef(null); useLayoutEffect(() => { gsap.fromTo( ref.current, { scrollTrigger: ref.current, opacity: 0, y: 32, }, { opacity: 1, y: 0, duration: 1, stagger: 0.2, } ); }); return ( <div ref={ref} className={className}> {children} </div> ); }; AnimateIn.propTypes = { ref: PropTypes.node.isRequired, className: PropTypes.string, }; AnimateIn.defaultProps = { className: null, }; export default AnimateIn; And then I'm using it on other components like this: import React from "react"; import AnimateIn from "./AnimateIn"; // --- const Link = () => ( <AnimateIn> This would animate in! </AnimateIn> ); export default Link;
  4. Thanks @GreenSock I saw gsap.core in the console and thought it might be related to something I was doing with GSAP. It looks like the build I'm using is stripping out my <path>'s in my SVG. No idea why it would decide to delete bits of code, but definitely a point to start.
  5. I'm working on a little animation at the moment and I have it working pretty nicely when it's running locally. When I package it and deploy it however I'm hit with errors. I thought this might have something to do with gsap trying to interact with the page before it had loaded and it throwing an error, but that doesn't explain why one of the animations is actually working fine (but the others aren't). Here's the bugged production version; https://hult-network.vercel.app/ And a link to the code; https://github.com/chrish-d/GSAP-Connected-Nodes If you pull the code, this should get you going; npm install && parcel index.html Lastly I've attached a screenshot of what it should look like. Thanks for any help
  6. Thanks @GreenSock this was kind of the general pointers I was hoping for — certainly not asking anyone to do the work Glad to go in armed with some information around this. I'll report back in on how I get on! Cheers
  7. I've been asked by a client if we can create something similar to the attached screenshot. I'm sure I've seen an example of something similar somewhere which used some kind of method to calculate the start/end positions of the lines but I can't find it. So far all I've done with gsap is some simple transitions so this is definitely taking it up a notch for me. Any pushes in the right direction would be appreciated. The general idea is that the images would move around and the lines would stay 'attached' in the same position. There's also a line of text which I see as a 'nice to have' — I'm sure there are ways we could work around that if it wasn't possible.
  8. That was it! I completely overlooked the trigger needing to be the same ref in this case (it animates itself in as it appears). Thanks as always @ZachSaucier
  9. I'm trying to get ScrollTrigger to work as a React component that I can wrap other elements in to have them animate when they appear. So if I have a bunch of components named <Box /> and I want them to reveal themselves when as they are scrolled in to view, I want to be able to wrap them in a <Reveal /> component that will do this — rather than rewriting the same code. Is there a simple way to do this? Currently in my live example (not in the CodePen... I'm not very good at writing these) the component animates in but it does all of the animations at the exact same time.
  10. Thanks for taking the time to reply @Rodrigo — your points are really helpful and certainly give me something to work with today as I was at a total loss yesterday! And thanks for the kind words its been a fun design and build, this one. EDIT: Solved! Adding clearProps: 'opacity', to showMoreClick() seems to work! Thanks for the help @Rodrigo
  11. I have a series of divs each with a hover function where hovering in causes an animation to play, and out causes it to reverse. I also have a `viewAll` state which allows you to expand the amount of divs that you can currently see by pressing a button. A weird bug has been reported where if you hover over one of the divs and then press the viewAll button, the animation will pause at whatever progress it was currently at. Hovering over that div again will cause the animation to play to the end, and out will cause it to reverse back to whatever progress of the animation it was in when you clicked expand.
  12. 👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻 👏🏻👏🏻👏🏻💚👏🏻👏🏻👏🏻 👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻
  13. I'd be interested in testing this out, too. I can apply it to the current build we have on a separate branch for testing as the current scroll plugin we have is very basic.
  14. Thanks again @ZachSaucier, working perfectly. Sounds like I need to go and read the full article
  15. Thanks for explaining that so well, @ZachSaucier! The bit about using relative values `+=` is invaluable. One quick follow up question, how could I chain together a timeline with this? Let's say I wanted the button background to turn red, and then maybe an arrow `<span>` appears after the text or something. button.tween = [ tl.to(button, {backgroundColor: "red", paused: true}); // can I chain them up like this in some kind of array? tl.to(...) tl.to(...) ]
×