Need some help about slide in right upon "mouseenter", slide in left upon "mouseleave"

[tekojtrapkomo]

Hello good people of GSAP. I am new to GSAP (also new in JS).

 

I am trying to do a project where there's no new page but content changes when clicking on anchors. Is it possible to add animations background image when mouseenter and mouseleave? Tried to add "transition all" CSS properties in .main div but it's only working on mouseleave and felt kind of funky.

 

Also, I know this ain't GSAP concern, but how do i hold background image when clicked "about" button and only leaves when pressed back button now it's leaving whether it's clicked or not.

See the Pen YzjzPmj by tekojtrapkomo (@tekojtrapkomo) on CodePen

[mvaneijgen]

Hi @tekojtrapkomo welcome to the forum!

 

You had no GSAP code in your javascript. I recommend always trying your hand at some logic before posting a question, this is the best way to learn and that way we can see your thought process and better help nudge you in the right direction. 

 

That said I've tweaked your pen a bit. There isn't really a way to animate a background-image, it's either set or not. So what I've done is move your background-image to just an <img> tag and set that to opacity: 0; this way you can't see it. (note that I had to add some CSS) 

 

I've created a timeline for this animation which is paused initially then when on mouse enter I .play() the timeline and on mouse leave the timeline plays in .reverse()

 

Then on click I set the variable isAboutClicked gets set to true, so that the logic in mouse enter and leave stops working and only if back is clicked everything will be reset again. 

 

See the Pen vYaYJXJ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

To me this sounds like an ambitious project if you're new to JS and GSAP, it is good to have goals, but sites that don't refresh when rerouting is with Vue.js and React are build for. To tackle that as your first project is a tall order. Be sure to also tackle some smaller projects to get the hang of GSAP before you dive in the deep end! Hope it helps and happy tweening! 

[tekojtrapkomo]

Hi @mvaneijgen. Thank you so much for the deep insight answer and advice, I had no idea this should be built with JS frameworks, funny me tried to add event listener in event listener, stopPropagation() 😥

[mvaneijgen]

55 minutes ago, tekojtrapkomo said:

I had no idea this should be built with JS frameworks

That's not what I said! But creating a site that doesn't refresh as your frist project when you're new to JS is a tall order. Over at Vue.js and React there are A LOT of smart developers that try to solve those issues, so you tackling that as a new comer will require a lot of elbow grease. 

 

My recommendation would be to tackle some small 'simple' projects at first and slowly build to one big project, this way you can break everything in to sections and learn one step at a time