Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

0 Newbie

About Pata

  • Rank
  1. Thanks, now that I see the solution it seems so obvious.
  2. 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}) }) })
  3. I am very grateful. That's exactly what I need. Thanks!
  4. 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.
  5. 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,
  6. Cool! I can see the changes now. Thanks a lot!
  7. 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,
  8. 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,
  9. 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,
  10. 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.
  11. 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!
  12. Hello, I'm trying to update this @Shaun Gorneau Codepen. First of all I would appreciate some help moving the code from jQuery to plain JavaScript. I'm stucked On the other hand I'm experimenting with this pen trying working with a font-size relative to the window width (example: font-size: 8vw;). Obviously, on window resize it messes up all the programming because it changes the object width. Anyone has a better idea than refreshing the page on window resize with a classy: window.onresize = function(){ location.reload(); } Thanks in advance,