_Greg _

I don't see any problem with this. You can hire onLeave callback

Hi @Chipsa! Please create a minimal demo on codepen its hard to answer without any code.

Can you check does .targetX exist. When did you call mounted () function?

Hi! Welcome to the GreenSock forum! How do you refresh (and what did you refresh: DOM, variables, page...)? i don't understand hot to test your code. You can create minimal Vue demo in codepen?

Hi! if i understand you, you want change opacity from 100 to 0 when scroll from 0 to 100vh? speed = distance / time You can't change time of scrolling but you can change distance

Hi! In scrolltrigger documentation page you will find a lot of examples (on bottom of the page), i think you will find what you want there. Or you can find examples in ScrollTrigger Demos page.

Hi @samanway! You can SplitText (only for Club GreenSock members) by char (typer: "char") and animate it how you want. In your example they change for only few letters with: font-weight: 400; font-stretch: 170%; For trigger animation on scroll just use ScrollTrigger plugin (free plugin)

Hi @DD77 I'm not sure that i understand you well toggleClass add/remove class to trigger element I add in css .active { color: red !important; } and change panels.forEach((panel, i) => {....} part https://codepen.io/gregOnCodePen/pen/gOmRyRP?editors=0110 That what you need?

Hi @AriRan Please check SplitText plugin and ScrollTrigger plugin you can create animation with with SplitText and control it on scroll with ScrollTrigger

This is part of Club GreenSock https://greensock.com/club/

There is two questions as i se: move svg with gsap - you can (on this forum you will find many answers and examples, its simple task for gsap) detect collision - you can (i sent a link with example of detection) So if you will try and create a minimal demo we can give a more specific answer. The same task you can create with pixi.js + gsap, three.js + gsap or native js

Hi @fd_alistair There is many variations for your idea You can read forum about SVG and about Collision

Hi @Lilibouh, please create minimal demo In your link cursor doesn't work in any browser (i check in Chrome, Firefox, Opera) Anyone who will check link disable Adblockers plugins Please check forum, i think, this is what you need:

Hi. You can change duration any time you want with .duration() method Documentation gsap.registerPlugin(ScrollTrigger); let animation = gsap.fromTo( "h1", { yPercent: 300, autoAlpha: 0 }, { yPercent: 0, autoAlpha: 1, duration: 5, ease: "none", repeat: -1 } ); let changeDuration = () => { if (window.matchMedia("(min-width: 801px)").matches) { // >801px animation.duration(5); } else { // <800px animation.duration(1); } }; changeDuration(); // call function any time you want // change duration on resize window window.addEventListener( "resize", function (event) { changeDuration(); }, true );

Thank you, @ZachSaucier I try to create something like Swappable After you drag and drop only two blocks chage position, but i don't realy sure that this is good realization with flexbox. i try something like: snap: { x: [0, blockWidth + gap.width, blockWidth * 2 + gap.width * 2] y: [0, blockHeight + gap.height, blockHeight * 2 + gap.height * 2] } i understand how to get blockWidth/blockHeight, but not sure how to get gap.height/gap.width in flexbox or grid layout (and need to update variables each time on window resize) How can i `keep track of where an element was` ? Maybe better create container for each elements and use Flip helper function to swap elements?

Hi! I check documentation and can't understand how to snap to custom/responsive grid? And second question, i try to create swap like https://codepen.io/GreenSock/pen/ONGprv?editors=1010 but its not working

You can find how to use gsap with Pixijs on Pixi documentation page (how to use with gsap3 and gsap2 included with examples)

Hi! you can check or this answer

You could try something like create timeline for hover animation and check/control it on mouseenter. not sure that this is right way https://codepen.io/-greg-/pen/YzWmBKv?editors=0011

Hi! You can use Threejs animation, you can use Threejs with gsap animation, you can use Pixijs with gsap animation Its your choise. With gsap you can animate almost any value or property gsap is free (only if you want to use club plugins you need to pay) you can use with CDN or download zip localy, NPM... as you wish https://greensock.com/docs/v3/Installation BUT if you use in games, for example - you need Business licensing Check this page

You ask about js/jquery but this is GSAP forum, please create simple Codepen demo, what did you try to do with gsap? what issues did you get? Plese read first:

let isPassed = false // global variable for detct is instanse is passed const $el = document.getElementById('drag-me'); let dragInstance = null; dragInstance = Draggable.create($el, { type: 'x,y', zIndexBoost: false, onDragStart: ()=> isPasses ? document.body.style.backgroundColor = 'pink': false, onDragEnd: ()=> isPassed ? document.body.style.backgroundColor = '' : false })[0]; What about check isPassed and if it passed - do something Or you can create public method and check it yourClass.isPassed() // return true/false

Can you explain why do you need create listener inside listener callback (you create two listeners for one event) By the way, Draggable already have listener onDrag, onMove ... you dont need create it again. I can't imagine why do you need to create listener every time on Drag start.

Hi! You dont need create eventlisteners You can use just like: const $el = document.getElementById('drag-me'); let dragInstance = null; dragInstance = Draggable.create($el, { type: 'x,y', zIndexBoost: false, onDragStart: ()=> document.body.style.backgroundColor = 'pink', onDragEnd: ()=>document.body.style.backgroundColor = '' })[0];

Yes. But not sure that i need it ? if i can clear and recreate timeline when i need it I want more learn gsap. I see on forum that someone use like: let tl = gsap.timeline() function addtl(){ return gsap.to('element', {x:100}) } tl.add(addtl()) and want to find more examples like this, and does someone use.remove() with this type of create timelines. Its mostly for learn gsap