Jump to content


  • Posts

  • 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 OSUblake I think to re-word my original question then... how can I make each slide a part of a timeline, and then progress the timeline to play the animations for that slide using a callback? Edit: As I work through this, what I'm struggling with is how each slide corresponds to a position in the timeline. Each Slide component (there are 6) adds to the main timeline by doing this: timeline.to(el.current, { rotate: 180 }); So if this code is ran 6 times, there should be 6 'positions'(?) chained together. I don't understand how I could say "we're on slide 4, so animate the timeline to position 4 from position 3"
  2. Thanks for the reply OSUblake. I think I'm a bit stuck in the middle here, as I suspect fullPage.js would tell me that GreenSock is not part of their platform and therefore they won't provide support. I'll try asking over there all the same!
  3. Hey everyone, I'm trying to add some animations to my fullPage.js slides. I have a series of slide components, and the desired effect is to trigger a set of animations once the slide is active. From doing some reading, I believe timelines are the best way to handle this, so I'm passing a timeline object to the component and doing the animating from within. The problem is that all of the slides animate as soon as the app loads. Here's a simple recreation of what I'm trying to do, showing pretty much the same code as my real app and having the same undesired effects: https://codesandbox.io/s/priceless-meitner-17759 (I created a Code Sandbox before I realised you prefer CodePen... sorry!) Thanks in advance :)
  4. 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;
  5. 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()
  6. 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;
  7. 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.
  8. 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
  9. 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
  10. 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.
  11. 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
  12. 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.
  13. 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
  14. 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.
  15. 👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻 👏🏻👏🏻👏🏻💚👏🏻👏🏻👏🏻 👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻👏🏻