Jump to content


  • Posts

  • Joined

  • Last visited


3 Newbie

About robs

Recent Profile Visitors

249 profile views
  1. Sorry, still have a little issue: If I "throw" the content to the left and resize the window to > 768px the two images are shifted to the left (since the inline style still remains). You can reproduce that behavior in my codepen above. I know customers usually don't resize their browser window back and forth but unfortunately there are some devices (like iPhone X) that exceed the 768px viewport width in landscape. I fixed this very simply by resetting the transform property on window resize: window.onresize = function () { document.querySelector($content).style.transform = 'translate3d(0px, 0px, 0px)' }; However now I have a different strange behavior: if I turn the screen back into portrait I'm able to dragged the content out of the container (see gif below). Looking at the properties in the dev tools I see that the transform property after dragging to the left is set to: translate3d(-594px, 0px, 0px); The maximum (and/or minimum) value should be translate3d(-279px, 0px, 0px) in case of the iPhone X. Did I do something wrong by setting the transform-value on window resize? Is there a better (and waterproof) solution how to handle this? Thanks so much!
  2. Thanks, @GreenSock, now it's working. Btw. the thing you missed was that the codpen was working for me as well. That was actually the strange thing: If I copy-pasted the code from the pen into my local project it stopped working. But now it's all good. Thanks again!
  3. Hi, for me dragClickables is still not working — neither in version 2.0.2 nor in 2.1. I would like to have 2 images turn into a slider if the viewport is < 768px (see attached image). The animation works fine, only the dragClickables doesn't have any effect. If my draggable item is an <a> tag it stops working. The interesting thing about it is: If I copy-paste my code into a codepen (see below) everything works fine. But in my (Laravel-) environment it's not working (unless I turn the <a> into a <div> or something else). I'm importing GSAP via NPM. I also tried to import the files from a local folder (not node_modules) but without success. Unfortunately I'm not able to use the beta-file Jack @GreenSock posted above — at least not by importing it as module. I know it's hard to help me in my case since you would have to have look into my real project. But maybe anyone else encountered a similar problem and found a solution. ? Thanks so much, Robert P.S.: Quick note concerning the pen: you have to open it in codepen in order to drag the viewport to less than 768 px
  4. This was the hint I needed. Thanks so much, Carl!
  5. I have a Dropdown Navigation with sub-menu-points that are revealed on click. For this I created a timeline with 2 tweens: A tween that changes the height and opacity of the next menu points A tween that animates the menu points from left to right. The forward animation works fine but the reverse function only reverses the second tween — however without any animation. The first tween isn't reversed at all. Any idea on what I did wrong? Thanks so much.