Jump to content

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


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

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

popland's Achievements

  1. thank you i tried chaining tweens on a timeline, but i wasnt thinking like in your example (that approximate really well what i was tinking), my approach was animating bottom corners in a tween and top ones in the other, but i realized that every clip path amimation should have all four corners. So, i guess your solution could be thr best i can do, even if it is tied to position instead than time thank you
  2. I have a basic image reveal with clip path, but it's quiete boring, the clip path is a square (4 points) that starts "compressed" in the middle and it animates the corners torward the edge of the container/image (if you see the demo, you probably better understand than my explanation) as i said the animation is quiete basic, so i was thinking to improve (at least for my taste) having the bottom points starting its animation a little earlier and the top ones to catch up later but it looks i can't decouple top and bottom corners in clip-path, at least i can't find a solution! any idea?
  3. Thank you @ZachSaucier just transformed it in a standalone function getting most parameters it needs paramters like: slider(target='.target'....)
  4. is it possible to reuse the code for multiple sliders in the same page? which is the most convenient and savy way to do it? for the moment i duplicated the timer, the proxy, the animation and the draggable, keeping the rest of functions intact any suggestion on how to optimize?
  5. my bug looks like here: https://codepen.io/lenna-the-vuer/pen/RwoVBgW if you resize while the animatio is going (start the resize and leave the resize before the animation ends), the alignement break up if, while resizing you wait the end of animation before leaving the resize handle, the slider revert to the first image and line up correctly, but you should "leave" the resizing before it restart so that's why i was thingking to suspend the animation while resizing and resuming it at the end
  6. it looks that somethimes it works and sometimes it doesnt (so it does not work) i move also gsap.set(imgObj, { x: function (i) { return i * boxWidth; }, }); inside the recalc function, and seems to work, but it is not your example still got my problem, when resizing white bars appears and images overlap
  7. Thank you, i used a timeline in an attempt to kill and restart the animation its still not working properly while resizing (guess its the pwrap), but ill try to sort it out https://codepen.io/lenna-the-vuer/pen/RwoVBgW Working version
  8. Thank you for your reply, i did it (i also added the pwrapWidth in the recalc), but still ignoring it
  9. I got the following slider that is working quiete correctly (still need to bind the next/prev button but that is not my concern) the images slides by the size of the container box and get wrapped so that the loop is infinite the size of container box is calculated at startup with let boxWidth = gsap.getProperty(container, 'width'); and i need to recalculate it when the window is resized, i attached a listener to the resize and with the function i can recalculate the new box width function recalc() { console.log(gsap.getProperty(container, 'width')); boxWidth = gsap.getProperty(container, 'width'); } but it looks the newly calculated width is ignored by my animation function that is already running via a delayedcall how can i reset the animation and have it restarted correctly with the new width?
  10. hello @ZachSaucier i just can not find a way to know which "index" of my array of slides is currently the one showing, so i can (i think while im in the "updateProgress" function) animate the corresponding index of the array of thicks (the red thicks over the prev/next button)
  11. based on a sample i got here on the forum i come up with an infinite slider, now my goal is to have a sort of index below it that indicates the slide i'm in so that the the index grow and shrink (at the moment is static with the first active) based on the slide, and also clicking the index will move to the correct slide basically i need to know which slide number i'm in (so i know which is next slider too) and trigger a shrink animation on the current index and grow animation to the next index synced with the slide movement, hoping my explaination make sense! any help will be appreciated
  12. noticed it! thank you... now that it works as expected im digging inside the modifiers Super thanks again
  13. Sorry, for my bad explanation, i was trying to saying that the code you showed me, even if it correctly loops between the function, do not animate the images if you try this code (that is basically the one you provided with the addiction of a couple of console.log) https://codesandbox.io/s/distracted-cray-m3sem?file=/src/App.js the 3 images do not slide correctly, it only slide from the first to the second, then (even if the animate function is called) everything stops there
  14. Thank you Zach tried your code, and it correctly loop indefinitely with 3 seconds pause (as you can see from my logs here https://codesandbox.io/s/distracted-cray-m3sem?file=/src/App.js), but it looks like after the second slide, everything stops, at every loop the images are not repositioned but stand stills
  15. thank you @ZachSaucier i just posted my demo in a new post