Search the Community
Showing results for tags 'targeting'.
Found 3 results
-
Hi! I've made an SVG image with several different objects. The interaction would be this: - If you hover an element there would be a small effect on this element. (a scale, rotate and move depending on the mouse position.) - If you hover out the element get back to the original position. Currently, I have a problem with the targeting, the effect animates all the elements in the SVG. ...And some with the mouse position tracking:) How can I solve this? Thanks for the help in advance
-
I tried to make a simplified version of what I experienced in another project. Essentially I get 2 warning in the console. I tried to make a modal that it will render if the state is equal to true. Else it will return null. I believe my issue is due to returning null. But I don't know how to do this another way. I experimented with the kill() option in gsap, but I had no luck with it. Here is the reference from the docs that I read. import React, { useRef, useEffect } from "react"; import gsap from "gsap"; export default function TestGsap(props) { const box = useRef(); useEffect(() => { gsap.from(box.current, { y: "500", ease: "expo", duration: 2, }); }); if (props.toggleModal === true) { return ( <div> <section ref={box} style={{ width: "10rem", height: "10rem", backgroundColor: "red" }} > <p>Hello, I am a red box.</p> </section> </div> ); } else { return null; } } -
I'm grateful for the incredible help I've received on this forum. I've seen other posts regarding randomization, but they're a bit above my head & seem to address randomization of attrs rather than my objective. Anyway, apologies if this has been mentioned. I have a great many divs. The example I'm posting below contains 9. I simply wish to render an effect of random fade-ins & fade outs of each DOM element, infinitely, (with different animation durations and delays between them). (Much in the same way Christmas lights slowly go on and off again seemingly out of sync...). I would hope to randomize animation duration so that they overlap. It's a simple animation to write procedurally, I suppose. I would like, however, to learn how to do it properly in GSAP. (I've seen on the forum, occasional suggestion to use jquery's each() in different contexts. Unfortunately, jQuery isn't available to me). Again, Opacity is the only attribute that I wish to animate: from 0 to 1 and then back to 0--repeatedly on each element... infinitely. Duration of this animation is what I would like to randomize. Additionally, (but of lower priority) I would like to randomize the order in which each item animates. I am not interested and a stepwise animation of elements down an Array & then back up again. {yoyo: true} was useful, on the entire array of staggerFromTo() elements... but I quickly discovered that isn't relevant to my problem. I wish, simply, to randomize the sequence (so, I suppose, the index) of each DOM element to be animated. Secondarily, I would like to randomize animation duration. Q.: Does cycle() perhaps do this? --I've only seen it address values for attrs... One useful post points to this: HOWEVER, these elements are animating simultaneously with equal duration values. I'm very grateful, again, for any assistance. What I learn here is giving me insight into a great deal of what I've tried to learn for years. --- P.S. (I'm doing something in react & cannot use jQuery.) targeting within react.js is another nut I'll crack once I solve this problem (with your kind help).
