Jump to content
GreenSock

uavide

reveal gsap with id

Recommended Posts

Good morning, from this codepen: 

See the Pen abOVoXb by cameronknight (@cameronknight) on CodePen

, i made mine:

My question is that instead of images, and html command <img src = ""> I would like to use id which contain a background image, (as you can see in my example codepen.)
The reveal image works, but I would like to understand how do I get the effects of gsap.
I think that I should modify this piece of code:

let revealCallback = (entries, self) => {
  entries.forEach((entry) => {
    let container = entry.target;
    let img = entry.target.querySelector("img");

maybe this:  

if (entry.isIntersecting) {
      revealAnim.set(container, {
        visibility: "visible"

this: r

evealAnim.from(img, 4, {
        scale: 1.4,
        ease: easeInOut,
        delay: -1
      });
      self.unobserve(entry.target);
    }

I don't know how to change it, could you help me please?

Thanks

Davide

See the Pen qBxYmPE by uavide (@uavide) on CodePen

Link to comment
Share on other sites

It looks like you're using IntersectionObserver in that demo. I'd strongly suggest switching to ScrollTrigger. It gives you MUCH more control. Way more features. See:

 

Maybe you could read the docs, watch the video, and give it a shot and then if you get stuck, post your GSAP-specific question here along with a minimal demo and we'd be happy to take a peek. 

Link to comment
Share on other sites

  • 1 month later...

@uavide howhow can i adjust the animation speed of the reveal?

Link to comment
Share on other sites

13 minutes ago, Vineeth Achari said:

@uavide howhow can i adjust the animation speed of the reveal?

If I understand your question correctly, it should be as simple as changing the duration to a smaller number.

Link to comment
Share on other sites

3 minutes ago, Vineeth Achari said:

How?

// old
duration: 1,
  
// new
duration: 0.3,

 

  • Like 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.
×