Milenoi

Thank you Guys! Gsap ist abolutely awesome!

@OSUblake thank you!! I will try to figure this out. Meanwhile i have a new problem on top. Is it possible to go to a specific animation in a timeline? e.g. i click on a button and want to go directly to the animation with the video? Is this possible?

Hi Guys! I need a little bit help. I created a timeline that contains several animations. Each Media-Container can contain an Image or a Video. ( it's like instagram-stories). I start the animation onclick. Then the first animations shows its image for some seconds. The duration of each animation is defined in a data-attribute. When a media-container contains a video the duration should be the duration of the video. Ok, this works - i have no idea if this is a good elegant solution.. but it works as far... No i have several problems: Problem Nr. 1: Progressbar - how can i do that? On the top of the images there is a progressbar which should show the progress of EACH animation. I really have no idea how to do this. there is an onupdate function but how can i get the progress of an single animation in a timeline? Problem Nr.2: Play the video. The video should play when the previous animation has ended - so far so good. But when i PAUSE the timeline (tl.pause())- is there a good way to pause the video, too? Do i have to write a custom stopAnimation function that will stop the timeline AND the video? I am totally confused at this time and need some help to clear up my mind. I appreciate your ideas and help SO much!!! Melanie <div class="button-bar"> <div class="button1">Start Animation</div> <div class="button2">Restart Animation</div> <div class="button3">Stop Animation</div> <div class="button4">Resume Animation</div> </div> <section class="wrapper"> <div class="inner"> <div class="progress-bar"> </div> <div class="media media-visible" data-duration="2"> <img src="https://images.unsplash.com/photo-1629893250400-a29b567843c8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Media1"> </div> <div class="media" data-duration="2"> <img src="https://images.unsplash.com/photo-1629872874038-b1d600221640?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Media2"> </div> <div class="media" data-duration="2"> <img src="https://images.unsplash.com/photo-1629795452973-89255c467c44?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Media2"> </div> <div class="media"> <video class="story-layer-video" crossorigin> <source src="https://media.istockphoto.com/videos/looped-cinemagraph-activating-data-center-with-server-racks-full-of-video-id1062074890" type="video/mp4"> </video> </div> <div class="media" data-duration="2"> <img src="https://images.unsplash.com/photo-1629795452973-89255c467c44?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Media2"> </div> </div> </section> const mediaElements = document.querySelectorAll('.media'); const btn1 = document.querySelector('.button1'); const btn2 = document.querySelector('.button2'); const btn3 = document.querySelector('.button3'); const btn4 = document.querySelector('.button4'); const progressBar = document.querySelector('.progress-bar'); const tl = gsap.timeline(); let addProgressbar = (mediaElements, progressBar) => { mediaElements.forEach(mediaElement => { let item = document.createElement('div'); item.classList.add('progress-bar-item'); progressBar.appendChild(item); }); } let startAnimation = (mediaElements) => { mediaElements.forEach(mediaElement => { tl.to(mediaElement, { ease: "power1.inOut", duration: typeof mediaElement.querySelector('video') !== 'undefined' && mediaElement.querySelector('video') !== null ? mediaElement.querySelector('video').duration : mediaElement.getAttribute('data-duration'), onStart: (mediaElement, mediaElements) => { mediaElements.forEach(mediaElement => { mediaElement.classList.remove('media-visible'); }); mediaElement.classList.add('media-visible'); const video = mediaElement.querySelector('video'); if(video !== null) { video.play(); } }, onComplete: (mediaElement) => { const sibling = mediaElement.nextElementSibling; if(typeof sibling !== 'undefined' && sibling !== null) { mediaElement.classList.remove('media-visible'); sibling.classList.add('media-visible'); } }, onUpdate: () => { }, onStartParams:[mediaElement, mediaElements], onCompleteParams:[mediaElement] }); }); tl.paused( true ); } startAnimation(mediaElements); addProgressbar(mediaElements, progressBar); btn1.addEventListener('click', function (e) { e.preventDefault(); tl.play(); }, false); btn2.addEventListener('click', function (e) { e.preventDefault(); tl.restart(true, false); }, false); btn3.addEventListener('click', function (e) { e.preventDefault(); tl.pause(); }, false); btn4.addEventListener('click', function (e) { e.preventDefault(); tl.resume(); }, false);

Dear @elegantseagulls, you're totally right. I missed the load event- shame on me! Thank you!! now it works fine

Hi guys, I tried to lazyload a video mit scrollTrigger, using data-src Attribute. I wonder why this ist not working? When section2 top enters bottom of window src of the video is set. But the video does not appear it is invisible. What am i doing wrong? Thank you! Update: Added video.load();

Wow @OSUblake THAT's really an impressing Solution, many thanks!! Meanwhile i checked out CSP Issues and youre right (again ;)- no problem. Thank you so much! (Read you at my next problems

I will try that and tell you! My svg reaches its final state when the parent container is in the middle of the browser. Then i scroll further down. I thougt it would be a nice effect if the animation of the svg now will start again. It should fade out an move back to the right and left You can see it in my codepen. Nothing else happens when i "leave" the section2 and it scrolls over the 50%...

https://codepen.io/milenoi-the-sans/pen/dyWgjWw Thank you! CSP is content security policy, but i just wanted to know if it is possible in general to avoid inline styling. it is totally okay for me to know that this is not possible. Further Questions: i made a new pen. Some svg paths now transform and get opacty styling. works perfekt. The svg gets its final positioned status when 50% of the parent container reaches 50% of the browser window (end: 50% 50%). I wonder if it possible to "revert" the timeline when i scroll down then? scrolling further on should move the paths back to the left and right and opacity should fade to value 0... Why could i realize that? another scrolltrigger? Chaining animations?

Thank you so much!! Now it becomes much more clearer to me! To wrap all these paths in a group is an excellent way to deal with this issues. I will do that! Thank you..! I have another question: is it generally possible to avoid inline styles? (e.g. to avoid CSP problems) Would the GSAP CSS plugin help?

Hi, 
 i try to animate a svg when scrolling down. The svg contains 2 paths, both have a class. .detailed-pattern-01-rectangle-1 .detailed-pattern-01-rectangle-2 
 I want to change the opacity from 0 to 0.1 and move the path a few pixels. 
 
 But it doesn't work with scrollTrigger, i have no idea what i am doing wrong.. 
 It should work reverse, following scroll-direction. 
 Maybe someone can help? 
 
 Thanks a lot!
 
 


I thank you for this competent and detailed explanation! I am really impressed with the helpfulness of this forum. I've implemented the suggested solution and it seems like that solved the problem at least I couldn't reproduce it anymore. (end: 'bottom bottom- = 10',) Many thanks!

Hi OSUblake, i updated as you suggested, but the problem did not disappear I Added my codepen. You have so scroll to the end oder in the middle of the page and then reload. Bar is SOMETIMES not sticky. Thank you!! Milenoi

Hi, i have a simple ScrollTrigger on my page which does some scrolling magic on its onUpdate function with another elements, using the self.progress values. My Page is very long. I realized that - when i reload my page and it starts in the beginning not on top (this is natural browser behaviour, nothing i should control) - but somewhere in the middle of the page- that my animations do not work properly. The self.progress is sometimes 0, not as expected 0.78899 whatever (depending the position my browser reloads). Sorry it is a little bit hard to explain. But did anyone notice similar behaviour? When i put the ScrollTrigger in a setTimeout function it works as expected but i thinks this is not a good way to solve this. window.addEventListener('load', (event) => { ScrollTrigger.create({ trigger: '.bar', endTrigger: '.footer', // user has scrolled to the end of the page start: 'top top', end: 'bottom bottom', toggleClass: 'sticky', onUpdate: (self) => { console.log(self.progress); } }); });

I am overwhelmed.( I will not forget to post my solution, i am just a little busy at the moment...) Looks perfect to me. Thank you so much all of you!

It is quite close but not exakt the desired behaviour. The indicator should show the exact scrollprogress.... it is hart to explain but it should visualize the exakt mouse position. But it is an interesting solution and a very small amount of code. Yesterday i got so much clever input from you guys. I wrote an animation function for the indicator and put it into the onUpdate function. My function uses self.progress to calculate / controll the translate3d css property of the indicator. For me, this works "perfect", also (of course) onresize. I have no idea it this is technically the best solution but it matches my idea how the progressbar should behave. If you want i can make another codepen with my solution to show it the community and to discuss with you? Best wishes, Melanie