Tee

So I'm implementing a smooth scroll like this: useEffect(() => { const container = document.querySelector(".scroll-container"); document.body.style.height = container.scrollHeight + "px"; const onScroll = () => { gsap.timeline() .to(".scroll-container", { y: -pageYOffset, overwrite: "auto" }, 0) } document.addEventListener("scroll", onScroll) }, []) The smooth scroll is working fine, but its height is not being calculated properly. In other words, the scrollHeight I get from the container, won't be enough to scroll the whole container using smooth scroll. How do I calculate the height I need for smooth scroll?

I have a circle which is supposed to be transformed in the direction of the cursor all time. node.addEventListener("mousemove", e => { const {x, y, width, height} = blob.current.getBoundingClientRect(); gsap.timeline() .to(blob.current, { duration: 10, x: e.clientX - (x + width / 2), y: e.clientY - (y + height / 2), force3D: true, overwrite: "auto", ease: Linear.easeNone }, 0) }) This is fine, but includes unwanted behavior: when being further away from the circle and rapidly changing direction and distance from the circle, there obviously will be a change in speed since the distance for the circle to travel in this 10 seconds gets shorter/longer. How can I ensure the same travel speed all the time, no matter where the cursor is?

So I have a simple GSAP timeline to move an element with the direction of the mouse' event: node.addEventListener("mousemove", e => { const x = e.clientX / 10; const y = e.clientY / 10; gsap.timeline() .to(blurRef.current, { yPercent: -30, x, y, duration: 1 }, 0) }) It works fine, but I want to add an infinite bounce effect which happens simultaneous to the mouse animation. I've done the bounce effect only before with pure css, but this makes GSAP stop working (mouse effect won't work). Is there a way to handle both simultaneously? Is there an equivalent for the CSS with GSAP? .blur { animation: bounce 2s infinite ease-in-out; } @keyframes bounce { 0% { transform: translateY(-10px) } 50% { transform: translateY(15px) } 100% { transform: translateY(-10px) } }

I'm using gsap to make a div follow my cursor. Hence I need to center it. To do so I use the following code: gsap.timeline().to(innerCursor, 0.1,{ transform: `translate3d(${clientX}px, ${clientY}px,0) translateY(-50%) translateX(-50%)`, ease: Power1.easeInOut }); This works for Chrome, but not Firefox or Egde - how so? I know translate(-50%, -50%) isn't supported by Firefox, but how can I bypass this?

Ok I figured this was rather an issue with react than with gsap/scrollmagic. Using scrollmagic-plugin-gsap instead solved the issue.

I'm trying to use gsap in combination with ScrollMagic. To do so I created a timeline, but this returns an error for setTween(tween): Anyways, after importing: import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap"; I get the following error: import {gsap} from "gsap"; import ScrollMagic from "scrollmagic"; export const initPhoneScroll = () => { const tween = gsap.timeline() .to(".phone-left", 1, { x: -350 }) .to(".phone-right", 1, { x: 350 }); const controller = new ScrollMagic.Controller(); const scene = new ScrollMagic.Scene({ triggerElement: ".phone-image__wrapper", duration: "100%" }) .setTween(tween) .addTo(controller); }; How do I use gsap in combination with ScrollMagic correctly, since TweenMax, TweenLite, TimelineLite, and TimelineMax have all been consolidated?

Did the trick, thank you!

Nothing, but I tried logging currentBounds with all the values of the current position from getBoundingClientRect() - but smh this didn't return any values, even though Edge should support getBoundingClientRect() - any ideas? And thanks for the hints, definetely gonna use 'em! What does "<" mean though?

So I got the following gsap animation inside of a function to animate some of my content - it works fine in ever browser, but not for Edge - how so? Do I need some polyfill? Additionally FYI only the element img is not being animated - the rest (left, right) is. For some reason, inspecting the img element, it solely says translate3d(0,0,0). I tried matrix, I tried force3D but nothing helped. const currentBounds = { x: img.getBoundingClientRect().x, y: img.getBoundingClientRect().y, width: img.getBoundingClientRect().width, height: img.getBoundingClientRect().height }; const scale = ((window.innerWidth * 42) / 100 - currentBounds.width) / currentBounds.width + 1; const newPos = { x: (window.innerWidth / 2 - currentBounds.width / 2) - currentBounds.x, y: window.innerHeight * 0.6 }; const matrix = 'matrix(' + scale + ',0,0,' + scale + ',' + newPos.x + ',' + newPos.y + ')'; const ease = Quint.easeInOut; gsap.timeline().set(title,{ opacity: 1 }); animation = gsap.timeline({onReverseComplete: () => { activeTile = -1; document.querySelector('.ch__cart-holder').style.pointerEvents = 'auto'; title.style.opacity = null } }) .to(img, 1, { ease: ease, x: newPos.x, y: newPos.y, scale: scale, force3D: true // transform: matrix }, 0) .to(left, 1, { ease: ease, x: -3000, opacity: 0, force3D: true }, 0) .to(right, 1, { ease: ease, x: 3000, opacity: 0, force3D: true }, 0) .to(title, 1, { ease: ease, y: 0, yPercent: -50, opacity: 1, color: 'black' }, 0.75);

Sorry for the late response, but unfortunately not. But it's easier to explain having your example. So this black to red transitions happens on every click, that's how the app is supposed to start when it's being opened the normal way. But in my case I want a function to execute in case the user opens the app directly navigating to a specific path. This function shall execute the normal animation, but immediately show the red text without a transition - calling reverse() on the other hand, shall show a transition again.

So I'm navigating a page using transitions animated with gsap. I don't know if that's the correct approach, but currently my navigation consists of plain js code reacting to click events. Since I'm using react, I'm trying to implement react-router. F.e. to check if the about page is opened, I check whether the current path matches with about and then set the correct position of the container (initially it's transformed outside of the view): aboutTransition = gsap.timeline({onComplete: () => destroyPreviousScroll()}) .set(revealerAbout.DOM.inner, { yPercent: 0 }, 0) .set(revealerAbout.DOM.reverse, { yPercent: 0 }, 0); That's how the transition to about usually looks: aboutTransition = gsap.timeline({ onComplete: () => destroyPreviousScroll(), onReverseComplete: () => destroyPreviousScroll() }) .to(revealerAbout.DOM.inner, duration, { ease: ease, yPercent: 0 }, 0) .to(revealerAbout.DOM.reverse, duration, { ease: ease, yPercent: 0 }, 0) As you can see, usually it includes some ease - but for instantly setting it's position, it doesn't. Using aboutTransition.reverse() for the second example, obviously reverses the animation showing the same thing again but backwards - perfect - but currently for the first example, where I'm instantly setting the position, that's not the case, it just disappears again. To put it short, I need it to appear instantly, as with the first example, but reverse with an animation, as with the second example. How can I achieve this?

I'm very new to GSAP and didn't find an answer online, hence excuse this basic question. Is there a way to undo an const animation = gsap.timeline().. ? I know of animation.reverse() - I need something like this, but without the animation/ease - I need it to reset to it's initial values without any animation. Is there a simple way to do this?

I'm trying to achieve the following text hover effect: How do I achieve a hover animation that looks like the one in the video? How do I achieve that kind of space/delay between every single letter? Do I have to split them first or is there an easier approach? In the following codepen you can find my current progress.

Changing it kind of helped, thanks! But I still haven't achieved the effect I want - currently random letters are solely disappearing, but I want them to fly out to the top, and the ease in again from the bottom. You can find the codepen inside of the initial question!

It's 3.2.6 - what's the latest stagger property? Just `stagger` instead? Is it a plugin I have to register first?

I'm trying to use TimelineMax, but somehow I get the following error: "Unresolved function or method staggerTo()". That's how I import gsap: import {TweenMax, TimelineMax, Expo, Quad, Quint} from 'gsap' That's how I use it: new TimelineMax({onComplete: () => enterHoverAnimationRunning = false}) .staggerTo(letters, 0.2, { ease: Quad.easeIn, y: '-100%', opacity: 0 }, 0.04, 0) .staggerTo(letters, 0.6, { ease: Quint.easeOut, startAt: {y: '35%'}, y: '0%', opacity: 1 }, 0.04, 0.2); EDIT: Changing it kind of helped, thanks! But I still haven't achieved the effect I want - currently random letters are solely disappearing, but I want them to fly out to the top, and the ease in again from the bottom.

I'm currently working on a project I want to use smooth scroll for. To do so I decided to use @OSUblake's codepen. Since I want a horizontal scroll, I changed the direction from: TweenLite.set(this.scroller.target, { y: -this.scroller.y }); to: TweenLite.set(this.scroller.target, { x: -this.scroller.x }); ..and set the body's height according to the scroll-container's width, not height. - It kind of works, but it seems, that this.scroller.x (originally this.scroller.y) and the container's width don't match, since it "overscrolls". How so and is there a way to implement it correctly? I created a link to additionally visualize the issue: https://vibeitin.firebaseapp.com/

I was able to fix the issue by adding 'sans-serif' to the font-family.. it's crazy.

The font is local, how do I know when it's loaded? Additionally I've never had this problem before, and I've used custom fonts and smooth scroll before.

I reckon I did - as far as I know.

I'm currently trying to implement a smooth scroll just like @OSUblake's smooth scroll. https://codepen.io/magiix/pen/MWwbmMV As for my content I solely have some images and some text. These images and texts are being fetched asynchronously, as soon as the data is set I try to resize the body to make the smooth scroll work for all of its content: doResize() { this.scroller.scrollRequest++; this.requestId = null; this.scroller.resizeRequest = 1; this.requestId = requestAnimationFrame(this.updateScroller.bind(this)); } This works fine. But somehow the text is still causing some minor height problems, not much but there's still some inset not showing all of the body's content - not always, but moste of the times. Removing the text solves the problem, but that's obviously not an option. My text component: <div class="row m-0"> <div class="col p-0"> <h1 class="title-container"> {{title}} </h1> </div> <div class="col p-0"> <p>{{text}}</p> </div> </div> Removing p solves the problem. Calling doResize() after a few second does also help, but I want it to have the correct height from the very start. BTW changing p's line height etc. does also affect the inset's size hiding some content. Any suggestion how to prevent this from happening? EDIT: After removing the custom font, everything works as well - how so?

Thank you - using gsap.set(... did the trick!

To implement a smooth scroll I used TweenLite.set{.. within my code. Serving the project works fine without any errors. But as soon as I try to build the project using ng build, it throws following error: How so? import { TweenLite } from 'gsap'; ... TweenLite.set(this.scroller.target, { rotation: 0.01, force3D: true }); "dependencies": { "@angular/animations": "~8.1.2", "@angular/common": "~8.1.2", "@angular/compiler": "~8.1.2", "@angular/core": "~8.1.2", "@angular/fire": "^5.2.3", "@angular/forms": "~8.1.2", "@angular/platform-browser": "~8.1.2", "@angular/platform-browser-dynamic": "~8.1.2", "@angular/router": "~8.1.2", "@types/gsap": "^1.20.2", "bootstrap": "^4.4.1", "firebase": "^7.6.1", "gsap": "^3.1.1", "rxjs": "~6.4.0", "tslib": "^1.9.0", "zone.js": "~0.9.1" }