uavide Posted June 1, 2022 Share Posted June 1, 2022 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 More sharing options...
GreenSock Posted June 1, 2022 Share Posted June 1, 2022 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 More sharing options...
Vineeth Achari Posted July 9, 2022 Share Posted July 9, 2022 @uavide howhow can i adjust the animation speed of the reveal? Link to comment Share on other sites More sharing options...
GreenSock Posted July 9, 2022 Share Posted July 9, 2022 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 More sharing options...
Vineeth Achari Posted July 9, 2022 Share Posted July 9, 2022 How? Link to comment Share on other sites More sharing options...
GreenSock Posted July 9, 2022 Share Posted July 9, 2022 3 minutes ago, Vineeth Achari said: How? // old duration: 1, // new duration: 0.3, 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now