Jump to content
Search Community

PSMJonas

Members
  • Posts

    6
  • Joined

  • Last visited

About PSMJonas

  • Birthday 06/21/1995

Recent Profile Visitors

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

PSMJonas's Achievements

  1. I have the problem that only on mobile devices the start of my Scrollmagic animation is not calculated correctly. On desktop devices the calculation works without problems. It doesn't matter which browser I use. URL: https://pechschwarzmedia.de/webdesign-agentur/ $('.animation-image_video').each(function() { var element = $(this); ScrollTrigger.ScrollTrigger.create({ trigger: element, pin: element.find(".animation-image_video__media"), start: "top top", end: "bottom bottom", markers: true }); });
  2. I have the problem that it takes a few seconds for my animation (timeline) to start. Unfortunately, I have no idea what could be the reason for this. I have already tried to set the delay to 0, unfortunately without success.
  3. Ah, thanks for the approach. I have solved the whole thing via an associative array, I think it also works: https://codepen.io/jonasloerken/pen/vYpNyBp?editors=1111
  4. Thank you very much for your answer. The problem is that the overlay is dynamic. I have updated the CodePen link again: https://codepen.io/jonasloerken/pen/vYpNyBp This leads to the fact that I can not create the timeline outside of a function, right? Otherwise I can't open or close the right overlay with the play() and reversed() functions.
  5. Hey guys, thanks for the response! Sorry, I totally forgot about the CodePen demo. Here is the link: https://codepen.io/jonasloerken/pen/vYpNyBp
  6. I use GSAP (Timeline) to show and hide an overlay. The overlay can be opened and closed without any problems. But when I want to open it again, it does not work. function animate_media(overlay, reversed) { var media_tl = gsap.timeline({repeat: 0, paused: true}); media_tl.from(overlay, {duration: 0.5, y: 30, autoAlpha: 0}); if(reversed) { media_tl.reverse(0); } else { media_tl.play(); } } I pass the element and a boolean value to the function (depending on whether the overlay should open or close). I noticed that the overlay keeps the following inline code after closing: opacity: 0; visibility: hidden; transform: translate(0px, 30px); Is there a possibility to show the overlay again after closing, i.e. to play the animation again?
×
×
  • Create New...