Jump to content

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

Ben Carey

  • Content Count

  • Joined

  • Last visited

Community Reputation

4 Newbie

About Ben Carey

  • Rank
  1. Perfect!!!! Thank you so much!!! This has sorted it 😀
  2. Is there a way to obtain the current target via the onupdate callback within the fromTo tween in GSAP 3? In GSAP version 2, I was able to do this: this.timeline.staggerFromTo(this._shuffle(this.spheres), 4, { positionY: -1 }, { positionY: 1, repeat: -1, yoyo: true, ease: Power1.easeInOut, onUpdate: function onUpdate(a) { a.target.mesh.position.y = a.target.meshInitPosY + (a.target.positionY + 1) * 200; a.target.mesh.rotation.y = a.target.meshInitRotY + (a.target.positionY + 1) * 3; },
  3. Ah, brilliant!!! Thank you. You are probably wondering why I am not using fromTo as well, this is only because I thought that might be causing the issue when I first started debugging. I will changing to fromTo when it comes to publishing. In that case, I am 99% sure this issue is caused by retina displays. This is further supported by the fact that it performs better when I plug my Mac into my external monitor (not retina). Can you think of anything I can do to improve this?
  4. @Shaun Gorneau - I can confirm that the issue still persists when I use xPercent and yPercent. See here: https://codepen.io/sinemacula/pen/OJPrjXj I can also confirm that the animation is much less glitchy when I test it on an attached monitor which indicates the issue is related to retina displays.
  5. Hi Shaun, Thank you for your prompt response. I assume you are using a retina display as well? I plugged my Mac into my monitor and whilst it isn't perfect, it seems to be better... Funnily enough, using numeric values with xPercent and yPercent was the one thing that I thought of doing but I didn't actually try. I will try this now and see if it makes a difference.
  6. I have now created this in GSAP v3 and can confirm the issue still persists. See here: https://codepen.io/sinemacula/pen/dyPwRqb
  7. I have read various posts on here, some old, and some more recent, about animations being glitchy in Firefox. I have done my absolute best to obtain as much information as I can prior to posting this, in addition to creating the attached Codepen. For some reason, I cannot get my animation to play smoothly in Firefox. To keep things simple, this is all the information I have (and have learned/tried): Issue only occurs in Firefox on Mac OS (smooth as silk in Firefox on Windows) Not my graphics card as a) it is a top spec 2019 Macbook Pro, and b) my designer has the same issue on
  8. In case anyone comes across this post in future; I wasn't able to identify the issue with timeScale, however the method that Zach originally suggested is the way in which to go about handling this. Namely, recreating the timeline on each resize (use a debounce function): _handleResize() { // Debounce the scroll animation initialization if (this.resizeTimeout) { clearTimeout(this.resizeTimeout); } this.resizeTimeout = setTimeout(this.initializeScrollAnimation, 100); } And then re initialize the timeline: initializeScrollAnimation() { // Emp
  9. Hi Zach, Thank you very much for your prompt response . The way I am using timeScale is by calculating the percentage change in my responsive image height, and then inverting that percentage change and applying it to the timeScale. In other words, think of it like this: User starts on large screen Responsive image height is 1500px Timeline duration is 1500 (the height of the image that will be animated) User resizes the screen (smaller) New image height is 1000px Calculate the new timeScale by doing originalHeight / newHeight i.e. 150
  10. I have set up a timeline that is controlled by the user's scroll position. See the following (it's in Vue.js but that shouldn't really affect anything here): this.scrollImageHeight = this.$refs.image.clientHeight; let trigger = 100; let duration = this.scrollImageHeight * 0.8; this.scrollTimeline = new TimelineMax({ paused: true }) .to(this.$refs.left, duration, { x: '-2.5%', y: '10.6%', force3D: true }, trigger) .to(this.$refs.center, duration, { x: '132%', y: '58.7%', force3D: true }, trigger) .to(this.$refs.right, duration, { x: '68.5%', y: '-6.7%', force3D: