Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

9 Newbie

About chrisi51

  • Rank
    Advanced Member

Profile Information

  • Gender
  • Location

Recent Profile Visitors

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

  1. @ZachSaucier now i got you ... and i came to this: gsap.utils.toArray(".clicker-wrap").forEach(function(clickerwrap){ let textbox = clickerwrap.querySelector(".textbox"); let clicker = clickerwrap.querySelector(".clicker"); bbox = clicker.getBBox(); clicker.style.transformOrigin = (bbox.x+bbox.width/2)+"px "+(bbox.y+bbox.height/2)+"px"; let tl = gsap.timeline({ }) .to(textbox,{autoAlpha:0}); clickerwrap.addEventListener("click", function() { tl.reversed(!tl.reversed()
  2. i also tried to just put each eventlistener statically in the code like var overlayStateScene1 = gsap.timeline().to("#textbox-7",{autoAlpha:0}); document.querySelector("#clicker-7").addEventListener("click", function(event) { overlayStateScene1.reversed(!overlayStateScene1.reversed()); }); document.querySelector("#textbox-7").addEventListener("click", function(event) { overlayStateScene1.reversed(!overlayStateScene1.reversed()); }); instead of using any form of loops. And its exactly the same problem i also have the followi
  3. something like that? https://codepen.io/chrisi51/pen/QWKNWoe im noob too and its not perfect but on wide screen it looks like haha
  4. i dont know if its really the animations because as soon as i disable those 10 event listeners (or replace them with the jquery code), everything is fine so i thought something would have to be wrong with the event listeners in general and hoped for any experience with that. The clickers are a little animated too. ive updated the pen to show any possible sideeffects. the overlays are simplified in form of circles but in my real project there is just a path + some text.
  5. Hey, i know, its not gsap related - well it is kind of gsap related, as i always got told, to replace jquery by native js and gsap 😃 i have an approx 100kb big svg file with a lot of animations in it (svg nodes animated by gsap) and the following elements are all nodes of this svg file, which is just inlined into the html. "#textbox-..." is an overlay like small box with additional text and "#clicker-x" is the button to open it. So it should be possible to open the overlay by clicking the clicker and closing it by either clicking the clicker again or clicking the overlay directly.
  6. Yep, with this version i don't need to apply any further check ... can just use it as it was intended by me sorry for the late reply
  7. mhh ok ... both seem to work: offset of 0.001 to end var random_start = Math.random(); var random_end = random_start + ((Math.random() <= 0.5) ? 1.001 : -1.001); or rounded start var randomstart = Math.round(Math.random() * 10) / 10; var random_end =random_start + ((Math.random() <= 0.5) ? 1 : -1);
  8. Hey @ZachSaucier i made some progress on this. can you give me some code? i tried to invalidate the tl in the resize function and also tried to restart it afterwards but nothing resulted in a recalculated <div id="middle"></div> ... either the width, nor the y position. at least i've added timeline.reversed() and default duration and i ripped jquery but im not sure if this is really the best option on my end as i had to google a lot to get it working with native javascript
  9. omg ... i just got a lightning in my head ... it seems like, start/end is not allowed to be like 0.5363453245 instead of 0.53 ... if i round the random value it seems to work. Is this a bug or intended?
  10. i try to move all dots randomly started and randomly reversed along the given path from their origin position on ... so its looking like fireflys. For any reason it seems to stuck randomly for some of them.
  11. ya i actually tried that but there was lot of problems occuring on that way. the animation have only to run if it is in viewpoint and so i have to kill and restart it different times. when i was going that way there were problems on the next restart but maybe its just missing start values ... probably i was close to the solution and didn't saw the forest cause of all those trees Thank you for leading the way
  12. the end goal is to kill an animation but instead of just letting everything get resetted or disappeared or something like the active motion should animate a little further while the elements get opacity 0 as the movements of the objects are very random i can't predict them and so i would need to read it ... think of a flying missile which get code 0 and so looses its target ... its just passing by and explodes seconds later 😆 i tried a lot like killing the first animation as a complete callback of the new animation but that throws a lot of problems. its very abstract a
  13. thank you for your feedback @ZachSaucier Something like that i was waiting for yep i really have to learn the full power of gsap to not fall back to jquery without any need of it - actually while reading your feedback i have no clue, what i could address to gsap instead of jquery but i will check that this is a good point, will also check that - btw. i meantioned to not have an idea, how to react on window resize. Is the only way to overwrite the whole timelime to change vh and vw used in the timeline? how to get timeline direction without asking ti
  14. there is timeline.recent() which gives you the last added tween but the last added tween is not the actual current tween animated. Is there a way i can grep the information, which parameters are just in this moment animated? Most impressive would be a way to get "The object is just moving from x:20, y:20 to x:100, y:100" like start position and end position of the current running tween. Problem on that may be, that there can be multiple tweens currently running on the same time, which makes it harder, i guess. Thanks in advance.
  15. Hey, i just built a new burger menu and would like to get some feedback, what do you think about. Sure, there a dozens of em out there but i wanted to build one on my own - also to get more familar with gsap Maybe you see some really bad DON'Ts so please tell me then actually i would have to update the vh and vw in the timeline on window resize Thank you