Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

1 Newbie

About Pata

  • Rank

Recent Profile Visitors

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

  1. Very clean @ZachSaucier. Many thanks! Here it is my final version: https://codepen.io/pataduprins/pen/JjKzqJP I've limited the variation variable and I had to add an extra 'box-shadow' to solve a problem with the 'overflow:visible' of the SVG that in Safari was not working properly. It's a tricky solution, probably not the desired one, but it works!
  2. Thanks for the reply @ZachSaucier I have tried applying your code but I don't make it work. It seems to work once but I can't undo the first tween to repeat it every time the element is triggered. I have tried the "onToggle" callback and it seems to work but only with basic tweens not with the MorphSVG plugin. There's a Codepen: https://codepen.io/pataduprins/pen/JjKzORW I hope we can find a solution! Thanks :)
  3. Hello! I'm trying to change the ease of a bounce effect according to the speed when scrolling. I get the desired value each time but I don't know how to translate the variable "variation" to my tween every time the ScrollTrigger is triggered. Thanks in advance, let variation = 0 const footerBounce = gsap.to('#down', { duration: 2, morphSVG: '#up', ease: `elastic.out(${1 + variation}, ${1 - variation})` }) ScrollTrigger.create({ trigger: '#footer', animation: footerBounce, start: 'top bottom', toggleActions: 'play pause resume reset', onEnter: self =
  4. Thanks, now that I see the solution it seems so obvious.
  5. I want to animate an element and its child on a forEach. I don't know how to point to that element on my GSAP line. Many thanks in advance, elements.forEach((e) => { e.addEventListener('mouseover', function() { gsap.to(e, {y: 100}) gsap.to(**CHILD ELEMENT OF e**, {y: -100}) }) })
  6. I am very grateful. That's exactly what I need. Thanks!
  7. I would like to know how to start an animation when scrolling down, to play another animation when scrolling up and especially how to run a different animation when I'm not scrolling. The truth is that you got the idea of the inertia but having the animation tied to the scroll speed makes it look weird. BTW thanks a lot for the proposal. I would appreciate an answer to the first question.
  8. I am trying to do this effect: ✅ the circle stretches when I scroll down ✅ the circle narrows when I scroll up ⁉️ and finally I want the circle to return to its initial position when there is no scroll Sure it's easy but I can't figure out how to do that. Also, I'd like to know if it's possible to give a delay effect at the beginning of the animation. Some kind of inertia. Any help will be welcome. Thanks in advance,
  9. Cool! I can see the changes now. Thanks a lot!
  10. Hey Zach, thanks for the fast answer. I really appreciate your tips but on your solution I just can see the same circles movement on each repetition. No new random numbers seems to be generated. Maybe we are missing something? Thanks,
  11. Hi there! I'm trying to repeat a timeline with different random numbers values on each repetition. (On the circles staggering) It seems it is working but the first tweens are not repeating. .to(square, {x: -200, backgroundColor: 'blue', borderRadius: '10px', skewX: '30deg', ease: 'bounce'}) If I change the "to" for a "from" it works. .from(square, {x: -200, backgroundColor: 'blue', borderRadius: '10px', skewX: '30deg', ease: 'bounce'}) Is this the best way to do it? Thanks in advance,
  12. Many many thanks Zach. It works really great! After inspecting the code I have a couple of questions just to fully understand your improvements : ) - What is the adjustTween() function taking care of? - What is the usefulness of .progress(progress) after the timeline? The solution for the resize seems quite obvious now that I see it. Thanks,
  13. 1- I don't know if reloading the page every time I resize the window to fix the problem with the typography is the best solution. 2- I tried to start typing the code translation to JavaScript but I have no progress because I can't understand the jQuery code. Maybe is a question for another forum because is not 100% related to GSAP.
  14. Thanks for the fast answer. My goal is to use the latest version of GSAP. I've made some improvements on the forked code below: https://codepen.io/pataduprins/pen/gOOZZxO I'd like to translate the jQuery to JavaScript and find a solution for the window resize and the responsive typography size issue. Thanks!