Jump to content
Search Community

change img on hover

FearMe4va test
Moderator Tag

Recommended Posts

I'm not quite sure what you mean. Are  you trying to fade a new image on top of the old one? Or slide another one in? Please be more specific about what your goal is and we'd be glad to help as long as it's a GSAP-specific question. If you want to transition a new image in, you'll need to actually create another element because during the transition obviously both would be visible. See what I mean? So for example, you could have an <img> element that sits above the others, and you swap in the new source to that one, have its opacity 0 and animate that up. Then recycle the old one by hiding it (after the animation), and then for the next transition, put that one on top and repeat the process. Just one idea - there are many ways you could do this. 

  • Like 2
Link to comment
Share on other sites

7 minutes ago, GreenSock said:

I'm not quite sure what you mean. Are  you trying to fade a new image on top of the old one? Or slide another one in? Please be more specific about what your goal is and we'd be glad to help as long as it's a GSAP-specific question. If you want to transition a new image in, you'll need to actually create another element because during the transition obviously both would be visible. See what I mean? So for example, you could have an <img> element that sits above the others, and you swap in the new source to that one, have its opacity 0 and animate that up. Then recycle the old one by hiding it (after the animation), and then for the next transition, put that one on top and repeat the process. Just one idea - there are many ways you could do this. 

i am trying to replace the image with this data-attr like in this example

 

See the Pen MWYQNdL by Fearless4va (@Fearless4va) on CodePen

 

like this which i have done in jquery but i am looking some transition in tweenMax

Link to comment
Share on other sites

I'm not sure you read my question. I realize you want to replace the image...but exactly how do you want things to animate. Replacing the image is easy - you already did that with jQuery. But if you want to transition them, you must have BOTH partially visible at the SAME time. See what I mean? That requires having TWO elements, not just one. This has nothing to do with GSAP - it's just a logic thing. And again, HOW do you want them to transition? Fade? Slide? Twirl? Explode? There are tons of options so we probably can't help much if you don't provide that direction. I also explained the fundamental concept that you'd need to apply, so hopefully that gets you headed in the right direction but if you still need some help please be more specific about what you need. 

Link to comment
Share on other sites

once the image change it should image should fade 

$('.list li a').hover(function() {
  var value= $(this).attr('data-src');
  var val = $(".image-holder img");
  TweenMax.to(value, 1, {
   attr:{
    src:val
   },
   ease: Power1.easeInOut,
   yoyo:true
  })
});

i tried this but didn't work for me 

Link to comment
Share on other sites

  • 2 months later...

Hey @vimaleurakaa and welcome to the GreenSock forums! 

 

The target of a tween must be an element/object or an array. You're trying to pass in a function which doesn't make much sense. Maybe you want to create a timeline and return that timeline in the function?

 

I think it would be helpful if you read the Getting Started article for GSAP:

https://greensock.com/get-started

  • Like 1
Link to comment
Share on other sites

Hi Zach,

Thanks for your reply, I'm still not able to get what I wanted to achieve please help.

 

What I wanted to do is I have a 

•HTML one Image DIV

•JS I have 5 images on array and 5 triggers of Start & Stop respectively.

▪︎What I wanted to achieve is on scroll start I want to smooth fade In the Images one top on another When the trigger Hit Start Marker.

 

I'm trying to use set() method but that's instant. I'm not able to apply and smooth fade to it. Also  I tried for each method but I'm not sure how to link the scroll in it. Can you please guide me any respective tutorial or how to do this please.

 

Thanks in advance. 

Link to comment
Share on other sites

ScrollMagic isn't a GreenSock product and we don't really recommend using it. You can do what you need to do without it. In fact, GreenSock is in the process of making its own scroll animation plugin! Until then, you can use this approach:

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

 

First, setup each of the elements and animations like you need them to run. In other words, animate it as you want it to animate before you attach anything to the scroll. 

 

Second, attach your animations to the scroll by using the method above. Alternatively, you could use intersection observers like this post talks about.

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