Jump to content
Search Community

Animate elements there and back on hover

seven test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

Hi I have a project in React where I want to showcase icons on hover of element, I quite managed to do that but I am getting unwanted dancing behavior that makes hovering satellite elements unavailable and it seem to remember last position and I would like to always start with this same values and finish animation nicely. Perhaps React way of activating interaction does not work well with gsap? How can i achieve the effect when on hover satelites go out, on hover out animation finishes instead of triggring on/off and on the next hover it all starts and finishes in the same place without the need to refresh the browser?

Here is the screen recording and the code:

https://vimeo.com/manage/videos/569878462

```

import React, { useState, useEffect, useRef } from 'react';
import { ShowcaseLogo } from './ShowcaseLogo';
import gsap, { TimelineMax } from 'gsap';
 
function random(x, y, snap, reuse) {
return gsap.utils.random(x, y, snap, reuse);
v;
}
 
export function Showcase({ target, fileNames }) {
const [active, setActive] = useState(false);
const showcaseRef = useRef(null);
 
const animateTopEls = () => {
const topEls = document.querySelectorAll('.topEl');
const bottomEls = document.querySelectorAll('.bottomEl');
 
var tl = new TimelineMax({ yoyo: false, repeat: 0 });
var tl2 = new TimelineMax({ yoyo: false, repeat: 0 });
 
const resetTl = (tl, elements) => {
return tl.to(elements, {
y: 0,
left: 0,
opacity: 0,
duration: 0.1,
});
};
 
const randomY = random(40, 90, 3, true);
 
active &&
tl.to(topEls, {
y: () => -70,
x: (i, el, arr) =>
-100 + ((el.getBoundingClientRect().right * i) / arr.length) * 2,
opacity: 1,
stagger: 0.01,
});
!active && resetTl(tl, topEls);
active &&
tl2.to(bottomEls, {
y: () => 70,
x: (i, el, arr) =>
-100 + ((el.getBoundingClientRect().right * i) / arr.length) * 2,
opacity: 1,
stagger: 0.01,
});
!active && resetTl(tl2, bottomEls);
};
 
useEffect(() => {
animateTopEls();
}, [active]);
 
return (
<div
onMouseEnter={() => setActive(true)}
onMouseLeave={() => setActive(false)}
ref={showcaseRef}
>
{fileNames.map((fileName, index, arr) => (
<ShowcaseLogo
name={fileName}
index={index}
maxIndex={arr.length - 1}
top={index <= arr.length / 2}
/>
))}
{target}
</div>
);
}

```

Many thanks!

See the Pen PomqbWY?editors=0010 by jaseveen (@jaseveen) on CodePen

Link to comment
Share on other sites

Heya! 

 

Your codepen's not working and it's a little hard to tell from just looking at the code - but I'd bet on a pointer-events conflict. 

Hovering the children of that div probably triggers mouseOver too, so it's not sure whether to play or reverse when the elements move under the mouse.

Stick pointer-events:none on the children of your div and see if that helps.

  • Like 1
Link to comment
Share on other sites

Hi seven!

 

Your codepen doesn't work because you are trying import local files.

import { ShowcaseLogo } from './ShowcaseLogo';

 

If you want to use imports on CodePen, try using a CDN like skypack.

 

import { gsap } from 'https://cdn.skypack.dev/gsap';

 

TimelineMax is deprecated. Just use gsap.timeline().

 

Also, check out the new scoped selector.

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

 

 

  • Like 2
Link to comment
Share on other sites

Hi Cassie, Hi OSUblake, thnaks for replies! :)

 

Disabling pointer events seem to work for this dancing effect, however I am unable to hover over them now to activate color, and when I want to use the selector for react I am getting TypeError: gsap__WEBPACK_IMPORTED_MODULE_3__.default.utils.selector is not a function . Perhaps this is some sort of animation i am trying to achieve that is to be googled under some name? :) I added missing component to the codepen and prepared sandbox  https://codesandbox.io/s/thirsty-minsky-smtgt?file=/src/App.js but I am fetching files with node and i cannot do it in sandbox or codepen. Perhaps you did not see the screen recording and that would shed some light on my problem https://vimeo.com/manage/videos/569878462 :)  With thie solution from Cassie my biggest issue is that it deos not reset animation after use but next hove uses previous positions

Link to comment
Share on other sites

I have tried gsap.set because i was hoping this would reset values to the oryginal ones but it did not work also onComplete i tried to run gsap.to with values from the resetting function, Please tell me why are those values not being reset and my animation in getting further and further away?

Link to comment
Share on other sites

yeeey success! i managed to achieve what i wanted but wrapping reset values into a function like so :D

 

 

const resetTl = (tl, elements) => {
return tl.to(elements, {
y: () => 0,
x: () => 0,
opacity: 0,
duration: 0.1,
});
};
  • Like 1
Link to comment
Share on other sites

Hi

I have managed to prepare working sandbox

https://codesandbox.io/s/thirsty-minsky-smtgt?file=/src/App.js

as you can see i want to align elements next to each other and on hover to add color to them, but before i get to them they dissappear, also they are not being aligned evenly but some gaps are bigger, would you have idea on how to overcome this? Thanks!

Link to comment
Share on other sites

11 hours ago, seven said:

to use the selector for react I am getting TypeError: gsap__WEBPACK_IMPORTED_MODULE_3__.default.utils.selector is not a function

 

Make sure you have the latest version install, 3.7.0.

 

I'm a little unsure what you're trying to do in your demo, and we don't have the resources to figure out logic problems for you. I would  second what @Cassie said. 

 

10 hours ago, Cassie said:

It's a small interaction - you don't need to use a framework to demo it.

Just recreate the markup in codepen, and add GSAP. The main use of a minimal demo is to strip it right back and focus on the basics.

 

Link to comment
Share on other sites

ok, no problems, thanks for a good will :) I got to the point where I'm quite happy with how they fade in, but perhaps you could help me with another challenge I want on hover over each satellite to spin and on hover out I want it to stop, possibly half way, I mean the moment I hover out it stops without finishing the circle but so far all I am getting is that all of them are spinning, and it looks like either parents animation propagates to children or they propagate to each other because I had a situation where the were starting one after the other, but I don't remember what I have done :) As you can clearly see these are my very beginnings with Gsap, but I want it to be a friend of mine ;) I also prepared a sanbox, in codepen I did not know how to use React https://codesandbox.io/s/elastic-galileo-zwikc?file=/src/App.js.

 

Thanks a million! :)

  • Like 1
Link to comment
Share on other sites

Hi, it's me again,

 

If you were so nice to give me a code review on gsaps practices please :) this was my first time with something a little more complicated than simple .to() and I want to get well with gsap so I thought it would be ok to ask for a review :)  And perhaps if you have some valuable info about righting reusable functions and about good courses in general

 

Thanks!

Link to comment
Share on other sites

thanks, and would you be able to tell me how to stop the satellites on hover out? I am having very hard times with it. When I set up timeline and then try to play or resume and pause or kill on hover out it does not work, when I try to reset the timeline with resetTl function in breaks the whole animation I have updated the sandbox https://codesandbox.io/s/elastic-galileo-zwikc?file=/src/App.js

Link to comment
Share on other sites

Hi Pal - I've never seen this before.

Would it be possible to put together a codepen with basic HTML and vanilla JS? You're likely to get a lot more help that way. The only reason to include React is if there's some sort of React/GSAP conflict you need help with.

By stripping it back we can just focus on the GSAP logic and help you get the animation working smoothly.

  • Like 2
Link to comment
Share on other sites

Hey There,

 

I have created a pen 

See the Pen ZEKQMoN?editors=1111 by jaseveen (@jaseveen) on CodePen

 I have moved everything onto one timeline and I reference items by class names formerly I did it by passing a reference to children and creating separate timelines for them, but I could not get effect when the satellite stops on hover out, and still I have difficulties with resetting animation on hover out, when I use resetTl fn on second hover the satellites that were rotating are still rotating and I want them to be reset, and when I hover over a satellite I want it to tart rotating and stop on hover out. Would you also be able to tell me which approach is better, the one with many tls, or the one with one? The one with one tl seems to be cleaner but when i hover over satellites they reposition on X axis for some yet to be discovered reason, I wanted to use play, reverse fns on the timeline but does not seem to work. Thanks for helping me with that :) 

Link to comment
Share on other sites

  • Solution

This may be helpful for you in react land to reference elements.

I didn't have time to dig into your spacing logic so I've replaced that with random values, but this is what you'll want to be doing to play and reverse the timeline on hover

See the Pen YzVwBbR?editors=0111 by GreenSock (@GreenSock) on CodePen



Also.  You can't just pass opacity and perspective into a timeline object. -  are you looking for the defaults object here?

   const tl = gsap.timeline({
      yoyo: false,
      repeat: 0,
      autoRemoveChildren: true,
      perspective: 1400,
      opacity: 0,
    });

 

  • Like 4
Link to comment
Share on other sites

I've added a grey area so you can see the hit area for hover. All children have pointer-events none so they don't interfere with the hit area.

If you also want to be able to hover the children too, I think stuff's going to get complex - maybe someone else can help there? I'm not really sure how you'd do that without things getting messy.

  • Like 3
Link to comment
Share on other sites

Thanks Cassie, thanks Mikel I will analyze both solutions and try to learn from them, Cassies looks exactly as I wanted so I mark is as a solution, but I did not manage to reverse it with the reverse method, anyway if I would like to have the satellites moving independently should I put them on a separate timelines or should I have them on one but separate or should i have them on the main timeline? 

  • 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.
×
×
  • Create New...