Jump to content

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


  • Content Count

  • Joined

  • Last visited

Community Reputation

5 Newbie

About emjay

  • Rank
  1. Hello @GreenSock, that's really great, thanks for the clarification. I'll come back with the final result soon. Thanks and Happy Tweening!
  2. Hello GSAP friends, I am currently trying to implement the following: A video is displayed in fullscreen after opening the page, and then when I scroll or when the video is over, it should move to its actual position and size in the header. The whole thing of course only once, when I scroll up again it should stay at the end position. For the beginning I tried to move the video to its end position while scrolling. First only with gsap.from(), because I didn't achieve any significant result, I tried it now with the new FLIP plugin. With this I get it to work
  3. Hello @mikel, thanks again very much for demonstrating your solution. In your last example there is a little problem. On hover the div's are not visible. Thanks, Emjay
  4. Hello @mikel, thank you very much for your different approaches or perfecting them. I like it all much better to solve it with a SVG. However, I'm not so good at it yet, and I also have to display text that is maintained in a CMS. In the following pen I demonstrated the hover effect to make it easier to understand what I want / have to display. As you can see, it already goes quite well, what I do not understand why the box shakes briefly when closing. https://codepen.io/emjay/full/b980ba33696a413a71e2811a19e06bef But I don't want to move too far aw
  5. Hello GSAP friends :), in the following pen you can see a simplified demo of a project I'm trying to implement. For better understanding a little background information about it: The lightblue circle will later be a graphic that represents a process. The lines of the 4 tooltips point to different places of this graphic. You should be able to hover over a tooltip, then it will stop to move. If you click on a tooltip it will enlarge and some text will appear. If you leave the tooltip it will close itself again. As you can see in my demo, the 4 squares are already moving.
  6. Hello @ZachSaucier, thanks for your message, but that didn't help, when I have a desktop viewport and load the page or the pen, the navigation is hidden with inline styles (opacity: 0). But in this case I want it to be visible. https://codepen.io/emjay/pen/642c1a8a34ad7790ac80272c6c281d1f
  7. Hello GSAP friends, in my pen you can see a navigation that opens from the right side on mobile and should be displayed normally on desktop. The animation for mobile works as expected, but I have problems to make the navigation visible on desktop because of the inline styles set by gsap. If you expand the navigation and drag the viewport larger the navigation remains visible because the inline styles are correct in this case. But in the default state the navigation is not visible because of inline styles like opacity = 0. Do you have a tip for me, how I should either remove t
  8. Hello @all A small question about the following pen. When the timeline has run through and restarted there is a short pause. I have tried several things, but I can't get rid of this pause. Can anyone tell me how I can remove this pause? Additionally the reverse is not working great, what I'm do wrong? Then I would like to know if my procedure is ok or if there is an easier procedure I should choose. And last but not least, if someone knows a good easing to make the shaking a little bit nicer, I would be glad to get some information about it.
  9. Good Morning @GreenSock, Thanks for the background information on how everything works. I have now gained some more useful insight into ScrollTrigger. With the settings you recommended, the problem described above has disappeared. Thanks for your great help as always. Maybe you could think about adding this setting to your Greensock Cheatsheet. But maybe this is already too special a setting. Have a nice Day! emjay
  10. Hello @ZachSaucier, i totally agree with you and understand the refreshing concept, but the problem is a different one I think, because the resizing is finished. The animation works, but when I scroll up again, a wrong value is set inline, see my video for a little bit more detail. As you can see I scroll up and down several times, and scrollTrigger always adjust the values until finally a px value of 543,933px is set. Then I make the viewport a bit narrower and it looks good at first, but suddenly the old value of 543,933px is set, although the window is narrower now
  11. Hello, i have made a pen from a little problem that occurs when resizing. Take a look at the attached gif. Everything works when the page is loaded initially. If you enlarge the screen a little bit there will be a space added between the images when you scroll up a bit. Is this in a problem with savestyles? Maybe someone has have a hint how I can avoid this. :) Thanks emjay
  12. Hi @ZachSaucier, thanks for your tips for simplification. This makes everything look even clearer and easier to understand. I have updated the pen, so that other people can benefit from it too. Thanks and all the best Martin
  13. Hi Folks, in the following pen I have a 6 boxes in a row, and I want to fade-in a certain number of boxes at the same time, as long the breakpoint that show's all at the same time isn't reached. My example works, but I have the feeling to have overcomplicated it. Can you take a look at it and tell me if there is a way to improve it? I would have loved to work with stagger, but couldn't find a way to use it. Thanks, Martin
  14. Hello @all, In the following pen I use 2 timelines. One is played right after loading the page and shows the arrow. After that the span element is shown for a short time and disappears again. In addition I want the "show and hide" effect from the span element to be triggered on hover of the arrow. But this only works if I remove the "show and hide" effect fron the intro. I think the problem is the following: When the intro is done, the span has set visibility:hidden and opacity:0 inline, and on hover only the translate3d attribute is changed inline, but not