Jump to content
Search Community

Block Reveal Effect with GreenSock

SammyC123 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I found an impressive little tutorial over on Codrops about a neat block reveal effect (seen here). Unfortunately, it uses anime.js as its animation library. I've been trying to replicate the effect in GSAP but have found little success. So I was just wondering, are there any pertinent examples of similar effects that you guys have achieved with GreenSock? I've searched pretty exhaustively all around Codepen and this site and can't quite find anything like it. But I know you guys have a much deeper knowledge of the site and what you've accomplished in the past.


Thanks for reading. Codepen demo with reduced code also provided below for reference (but it's still anime.js).

 

See the Pen ryKyBY by ChrisBup (@ChrisBup) on CodePen

Link to comment
Share on other sites

Sure, GSAP can do everything anime can do plus a lot more. And GSAP is faster too. It looks like the demo you provided leverages some other helper classes pretty heavily, and anime was only used for small portions. Here's a fork where I swapped in GSAP for the anime code: 

See the Pen 2f364a81f9c31cdec62316947da76021 by GreenSock (@GreenSock) on CodePen

 

The structure of things seemed a bit convoluted so I may have missed something, but it appears to work just fine with my edits. Is that what you were looking for? 

  • Like 7
Link to comment
Share on other sites

18 hours ago, GreenSock said:

Sure, GSAP can do everything anime can do plus a lot more. And GSAP is faster too. It looks like the demo you provided leverages some other helper classes pretty heavily, and anime was only used for small portions. Here's a fork where I swapped in GSAP for the anime code: 

See the Pen 2f364a81f9c31cdec62316947da76021 by GreenSock (@GreenSock) on CodePen

 

The structure of things seemed a bit convoluted so I may have missed something, but it appears to work just fine with my edits. Is that what you were looking for? 

 

Holy cow, you put that out fast! That's exactly what I was looking for... you are the master. That whole bottom section under

// Animate it

is what ruined me. What you did is perfect and even seems to be smoother (though maybe my eyes are playing tricks). Thank you so much!

 

And I agree, the structure of most Codrops stuff is a bit off. They do things in a very curious manner.

 

  • Like 2
Link to comment
Share on other sites

  • 10 months later...
13 hours ago, somose138 said:

Would it possible for you to recreate this for a react component? 

 

Ya of course, it just boils down to your knowledge and understanding of framework or library.

 

I am not familiar with react but I wanted to give it a try. I followed @Rodrigo's same blog post that I had advised you to follow in previous thread. Following is the fork of one of his demos. As you can see, it can be reduced to very little code, you can add more conditional logic to change colors etc.

 

https://stackblitz.com/edit/gsap-react-multiple-elements-5aqhzy?file=multiple-elements.js

 

Though there might be certain things that Rodrigo will do differently because this is very first time I am working with React but basically you need to start learning from resources we provide, almost everything is possible just depends on how you implement.

 

 

 

  • Like 5
Link to comment
Share on other sites

Well @Sahil is spot on (that's why He is a superstar around here :D).

 

The only thing I'd change is using the ref callback instead of reaching to the DOM directly. So instead of this:

 

componentDidMount(){
  const loaderContainer = document.querySelector("#loader-container");
  const loader = document.querySelector("#loader");
  this.tl
    .to(loader, 1, { y: -250, delay: 0.3 })
    .to(loaderContainer, 0.2, { alpha: 0, display: "none" };
}

 

I would create a reference in the constructor:

 

constructor(props){
  super(props);
  this.loaderContainer = null;
  this.loader = null;
}

 

Then in the render method use the ref callback:

 

render(){
  return <div>
    <div ref={ e => this.loaderContainer = e }>
      <div  ref={ e => this.loader = e }>
      </div>
    </div
  </div>;
}

 

Finally in the component did mount method:

 

componentDidMount(){
  this.tl
    .to(this.loader, 1, { y: -250, delay: 0.3 })
    .to(this.loaderContainer, 0.2, { alpha: 0, display: "none" };
}

 

But beyond that small detail just do what @Sahil is doing and you'll be fine.

 

Happy Tweening!!

  • Like 4
Link to comment
Share on other sites

23 minutes ago, Rodrigo said:

The only thing I'd change is using the ref callback instead of reaching to the DOM directly. So instead of this: 

 

I tried that actually but stackblitz was giving me weird highlights throughout the code and grayed out ref attribute when I used it on those elements, so I assumed ref will work on parent node only inside loop. Still overall I am impressed stackblitz just hope code highlighting won't be issue locally. :D

  • Like 1
Link to comment
Share on other sites

  • 2 years later...

Thanks @GreenSock for swapping in GSAP instead of anime. I forked the pen and replaced it with GSAP version3, transformed it into a Babel ES6 class and added the ability to set the config parameters right from the html template via data-attributes. There might be room for some additional improvements, e.g. exchanging helper classes with built in gsap methods, but I thought I share, what I have up to now, in case someone runs into the same situation. 🙂

 

See the Pen wvzbjXe by iuscare (@iuscare) on CodePen

  • Thanks 1
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.
×
×
  • Create New...