Jump to content

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

react-gsap Explode div into many

Recommended Posts

Hey everyone, I am a beginner to gsap/animation with JS and I am currently trying to implement some advanced animations with `react-gsap` and `react-scrollmagic`. I currently have a somewhat working version which implements section wipes and tweens a div around the screen.


The next step I'd like to take is being able to animate "exploding" the div (grey one with "test" text) into many smaller divs/images - and then also rebuild it back into the div as the user scrolls through the different sections.


I'm quite lost on where to even begin with something like this, so I was hoping someone could point me to a similar example or at least which documentation I should be reading to further my understanding with this concept in mind.


I wasn't able to get a js playground of my code working, but I am still going to share the link as it at least formats my current code nicely and I've attached a video of what it currently looks like: https://codesandbox.io/s/react-playground-forked-47kir?file=/Demo.js


Thanks :)


Link to comment
Share on other sites

Welcome to the forums @rt861


Your demo doesn't work, nor does your video. I noticed that you are using ScrollMagic and react-gsap, both of which are not GSAP products so we don't officially support them over here.


I would highly recommend to ditch ScrollMagic and use ScrollTrigger. ScrollTrigger can do everything ScrollMagic can and a lot more. And of course we support ScrollTrigger as we made it. 


If you're new to GSAP and JS, I would honestly advice against starting out with React. It's going to be hard to learn any DOM and GSAP fundamentals as you're going to be forced into a particular coding style and have to understand how GSAP fits into React's lifecycles.


I think it would be much easier if you start out with a vanilla website, like on CodePen, and then start experimenting with making an exploding div. Once you have the explosion down, it will be really easy to hook it up to ScrollTrigger.


The basics for exploding stuff is pretty ease to do using random values.


gsap.to(".particle", {
  x: "random(-500, 500)",
  y: "random(-500, 500)",
  scale: "random(0.2, 0.5)",
  rotation: "random(-720, 720)",
  duration: "random(1, 2)"


A little more advanced for inspiration....


See the Pen MWvbbqG by GreenSock (@GreenSock) on CodePen



  • Like 1
Link to comment
Share on other sites

Hey OSUblake thanks for all the info. I'm experienced with js/react just knew to the scrollmagic/gsap side of things, I'll think about ditching ScrollMagic and just use straight up scrolltrigger and gsap in react rather than raect-gsap/scrollmagic.


Not sure why my video refused to attach, I'll try and fix that. And yeah my codesandbox kept running into random errors with react-gsap/scrollmagic that I couldn't recreate locally.


That demo is really handy, thanks.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.