Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

3 Newbie

About Tee

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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
  2. 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
  3. 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?
  4. Ok I figured this was rather an issue with react than with gsap/scrollmagic. Using scrollmagic-plugin-gsap instead solved the issue.
  5. 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.Con
  6. Did the trick, thank you!
  7. 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?
  8. 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.getBoundingCli
  9. 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.
  10. 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
  11. 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?
  12. 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.
  13. 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!
  14. It's 3.2.6 - what's the latest stagger property? Just `stagger` instead? Is it a plugin I have to register first?
  15. 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%'},