Jump to content
Search Community

reveal gsap with id

uavide test
Moderator Tag

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...

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...