Search the Community
Showing results for tags 'target'.
Found 9 results
-
Hey GSAP Team, I have a concern regarding my implementation of "scrollTrigger". The Start/End marker of the triggers isn't aligning correctly with the top and bottom of the triggers. Please focus on the ".services-content-heading-inner" element, as this is what I'm currently experimenting with. My ultimate goal here is to animate this element once it enters the viewport. However, it immediately animates because of how the elements' start/end is positioned. I tried changing the position to start: "center top", end: "center bottom". However, the position is still off and not really at the center of the trigger element. I attempted to change the trigger to the parent element, but the story remains the same. I really want to use scrollTrigger because it seems to be simpler compared to https://gsap.com/docs/v3/Plugins/Observer/. I also tried using https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.isInViewport()/ by wrapping the animation in an if-else condition "ScrollTrigger.isInViewport(element)". However, it doesn't fire the logic inside the condition even if the condition was met. I would appreciate your thoughts and expert advice on where I went wrong or missed. Thank you very much for any assistance. -
Hi, Is there any way to target another element for adding class while the trigger elements enters and exits viewport. Like a target prop or something. Or just add animation to another set of images. In the below code I am trying to add "active" class to the target element ".anim-phone-image" but i guess there is no such property ?. Please help me out useEffect(() => { const scrollTexts = gsap.utils.toArray('.anim-text'); scrollTexts.forEach((item, index) => { tl.current = gsap.timeline({ scrollTrigger: { trigger: item, scrub: true, start: 'top 30%', // start when top of trigger target hits 50% point of viewport end: 'bottom 10%', toggleClass: `active-${index}`, markers: true, target: '.anim-phone-image', }, }); }); }, []);
-
Hi there, I am animating a shape towards another shape. However, during the tween there might be a user interaction that changes the target of this animation. In this case I would like to *smoothly* change the ongoing animation so it moves towards the new target. I don't quite understand how to achieve this. When I use separate tweens, then it (obviously) just interrupts the current tween and starts a new one from the current position, which does not look smooth at all (especially with an ease like expo.inOut). In the codepen, when you first click the red target, the circle starts moving towards it. When you now click the blue target, while the circle is still moving, it starts a new tween that moves towards the blue target. I would like to change the setup so that clicking on the blue target continues the current tween, but lets it end at the blue target. Any idea, how to achieve this? Thank you!
-
Hi, Like you'll see in the codepen, my array of target is not updated. Is there a solution to do that ? Thank you guys Izigo
-
Hi, Is that possible to change target of an existing tween (without recreating it like here)? Or clone the tween or timeline with the current var-s and the new targets? It's is important to use the same tween because it can contain some randomly generated var-s which aren't stored anywhere else. I'm thinking on something like: var animation = TweenMax.to(nodeFirst, 1, {x: Math.random()}) function duringTheAnimation() { time = animation.time() animation.invalidate() magicallyReplaceTargets(animation, nodeFirst, nodeSecond) animation.restart() animation.time(time) } I'm experimenting with a tool to use React and GSAP together. The goal is to let React to rerender any time it wants during the animations while GSAP can directly animate the DOM nodes (not messing with the React component state). It's going well so far, but it would be great to solve the case when the component remount the targeted element.
-
Hey all, I've have a look in previous threads re: changing target values of a tween in progress. It seems like it's accepted that you can't. At least not by some some convenient method like tween.updateValues(x: new_target_x, y: new_target_y) In my example you'll see I have nodes (circles) that move around the screen. What I want to do is draw a line tween two of the moving nodes. This is easy right. But I want to tween the line drawing so that instead of instantly drawing completely, I want it to grow from the origin node. The problem I have here is that the destination node is constantly moving. I'm not 100% but it feels like i'd on every update I'd need to store the progress of the tween that's animating the line drawing from origin -> destination, kill that, then recreate the same tween but with the new destination values starting, setting the the starting progress the progress we stored from the previous tween. This feels like huge waste of resource, tearing down a tween and creating another every frame. Anyone got any suggestions? Thanks for your time. Rob
-
Let's say, I would like to set the opacity of my .logo and .loader to opacity 1 I will do .set($(".logo"), {opacity:1}); and the same for .loader The API says the .set method could accept an array of objects, how do I pass in an array of objects? How do I combine them into 1 line of code? .set([$(".ip-logo"), $(".ip-loader")], {opacity:1}) This isn't working.
-
Hello All, My question has to do when using the tween target. I know as far as speed that targeting elements in the DOM by ID is faster than targeting a class. I know to use document.getElementByID() when i need to target a ID. But when it comes to other selectors ( like classes, attribute selectors, etc... ) GSAP knows to add the jQuery $() if jQuery is included in the page. So my question is... What is faster... to omit the $(), or include it: ?? // jQuery is loaded in the page // Which is faster ? // without the $ TweenMax.to(".myClass", 2, { color:"#FC0"}); // with the $ TweenMax.to($(".myClass"), 2, { color:"#FC0"}); If I include the $() does it help with speed or performance, since im including the $() or does it not even matter? Thanks in advance for any help with my questions -
INTENDED EFFECT: I have a TweenMax with a variable for the target. This target is the current element. var currentElement = $("#div1"); The tween is nested inside a TimelineMax set to repeat. Once the tween completes, an onComplete fires. Within my onComplete function, the target will dynamically change. currentElement = $("#div2"); ISSUE: Target never changes on timeline repeat of the nested tween, even after redefining the variable. I know that invalidate() works with changes in vars parameter, but it does not work with the target. QUESTION: Is there any way to achieve the intended effect? Any help much appreciated.
