AlwaysDigital

Yes thanks for your feedback. In case I want to have the CSS as fallback for non-js users and only animate when js is loaded, I will have a problem if define everything in JS. But I get the issue Thanks!

Here we go https://codepen.io/philippe_greban/pen/NWwdGbr I would like the square to 5% from the top of the yellow part, which is relative positioned

We changed the animation and I was able to go further. However I've noticed a weird behavior and I would like to have your lights on this one. In a part of timeline I want to reveal items from the center then place them at a defined position. I've noticed that there are 2 translate values et the last one as a negative pixel value. I don't know where it comes from. this is the timeline let primaryTl = gsap.timeline({ scrollTrigger: { trigger: "main", pin:".frame-type-wpwa_ce_agency_history", start: "top top", end: "+=20000px", pinSpacing: true, // once: true, scrub:true, // snap: { // snapTo: "labels", // snap to the closest label in the timeline // duration: {min: 0.2, max: 3}, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity) // delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping // ease: "power1.inOut" // the ease of the snap animation ("power3" by default) // } onLeave: function(self) { self.scroll(self.start); // <-- sets position to start of ScrollTrigger self.disable() self.animation.progress(1) } } }) primaryTl.add("scene2"); primaryTl.to(".frame-type-wpwa_ce_agency_history #star", {opacity:0, delay: 1, duration: 2}, 'scene2'); primaryTl.to(".frame-type-wpwa_ce_agency_history #code1", {opacity:0, delay: 1, duration: 2}, 'scene2'); primaryTl.to(".frame-type-wpwa_ce_agency_history #code2", {opacity:0, delay: 1, duration: 2}, 'scene2'); primaryTl.to(".frame-type-wpwa_ce_agency_history .pulse", {opacity:0, animation:"none", delay: 1, duration: 2}, 'scene2'); primaryTl.to(".frame-type-wpwa_ce_agency_history #parallax-headline-first", {opacity:1, delay: .5, duration: .5}); primaryTl.to(".frame-type-wpwa_ce_agency_history #parallax-headline-first span", { duration: 2, x: 0, ease: "ease-out", }); primaryTl.set({}, {}, "+=1") primaryTl.add("scene3"); primaryTl.to(".frame-type-wpwa_ce_agency_history #parallax-headline-first", {opacity:0, delay: 1, duration: 2}); primaryTl.add("scene4"); primaryTl.set(".frame-type-wpwa_ce_agency_history #star", {width:500}); // primaryTl.to(".frame-type-wpwa_ce_agency_history #first-website, .frame-type-wpwa_ce_agency_history #wpwaishere, .frame-type-wpwa_ce_agency_history #team, .frame-type-wpwa_ce_agency_history #services, .frame-type-wpwa_ce_agency_history #star, .frame-type-wpwa_ce_agency_history #code1, .frame-type-wpwa_ce_agency_history #code2", {opacity:.3, delay: 1, duration: 2,}); // primaryTl.to(".frame-type-wpwa_ce_agency_history #parallax-headline-first", {opacity:0, delay: 1, duration: 1}); primaryTl.to(".frame-type-wpwa_ce_agency_history #first-website", {opacity:1, scale:1.5, delay: 1, duration: 2}); primaryTl.set({}, {}, "+=1") // primaryTl.to(".frame-type-wpwa_ce_agency_history #first-website", {opacity:0, delay: 1, duration: 1, width:"0"}); // primaryTl.to(".frame-type-wpwa_ce_agency_history #first-website", { delay: 1,xPercent:-50, yPercent:-45, left:"50%", top:"45%", width:500,zIndex:2,duration: 1}); primaryTl.set({}, {}, "+=2") primaryTl.to(".frame-type-wpwa_ce_agency_history #first-website", {delay: 1,xPercent:0, yPercent:0, left:"250px", top:"250px", scale:1, width:250,zIndex:2,opacity:.3,duration: 1}); primaryTl.set({}, {}, "+=1") primaryTl.to(".frame-type-wpwa_ce_agency_history #wpwaishere", { opacity:1, scale:1.5, delay: 1, duration: 2}); primaryTl.set({}, {}, "+=2") primaryTl.to(".frame-type-wpwa_ce_agency_history #wpwaishere", {delay: 1,xPercent:0, yPercent:0, bottom:"5%", left:"15%",scale:1, width:300,zIndex:2,opacity:.3,duration: 1}); primaryTl.set({}, {}, "+=1") primaryTl.to(".frame-type-wpwa_ce_agency_history #team", { opacity:1, scale:1.5, delay: 1, duration: 2}); primaryTl.set({}, {}, "+=2") primaryTl.to(".frame-type-wpwa_ce_agency_history #team", {delay: 1,xPercent:0, yPercent:0, right:"10%",bottom:"5%", width:270,zIndex:2,opacity:.3,scale:1, duration: 1}); primaryTl.set({}, {}, "+=1") primaryTl.to(".frame-type-wpwa_ce_agency_history #services", { opacity:1, scale:1.5, delay: 1, duration: 2}); primaryTl.set({}, {}, "+=2") primaryTl.to(".frame-type-wpwa_ce_agency_history #services", {delay: 1,xPercent:0, yPercent:0, right:"5%",top:"5%", width:250,zIndex:2,opacity:.3,scale:1, duration: 1}); primaryTl.set({}, {}, "+=1") primaryTl.to(".frame-type-wpwa_ce_agency_history #first-website, .frame-type-wpwa_ce_agency_history #wpwaishere, .frame-type-wpwa_ce_agency_history #team, .frame-type-wpwa_ce_agency_history #services, .frame-type-wpwa_ce_agency_history #star, .frame-type-wpwa_ce_agency_history #code1, .frame-type-wpwa_ce_agency_history #code2", {opacity:0, delay: 1, duration: 2,}); primaryTl.to(".frame-type-wpwa_ce_agency_history #parallax-headline", {opacity:1}); primaryTl.to(".frame-type-wpwa_ce_agency_history #parallax-headline span", { duration: 2, delay: 1, x: 0, ease: "ease-out", }); primaryTl.set({}, {}, "+=3") this is the CSS .frame-type-wpwa_ce_agency_history{ position: relative; } .frame-type-wpwa_ce_agency_history #parallax-headline, .frame-type-wpwa_ce_agency_history #parallax-headline-first{ width: 100%; text-align: center; padding: 0 15px; } .frame-type-wpwa_ce_agency_history #parallax-headline{ top: 20%; } .frame-type-wpwa_ce_agency_history #parallax-headline-first{ top: 25%; } .js .frame-type-wpwa_ce_agency_history .inner { width: 100%; max-width: 1400px; margin: 0 auto; position: relative; height: calc(100vh - 80px); overflow: hidden; } @supports((text-stroke: 2px white) or (-webkit-text-stroke: 2px white)) { .frame-type-wpwa_ce_agency_history #parallax-headline-first span, .frame-type-wpwa_ce_agency_history #parallax-headline span { color: transparent; -webkit-text-stroke: 2px #fff; text-stroke: 2px #fff; text-shadow: none; } .frame-type-wpwa_ce_agency_history #parallax-headline span:nth-of-type(2), .frame-type-wpwa_ce_agency_history #parallax-headline-first span:first-of-type{ -webkit-text-stroke: 2px #fff; color: #fff; text-stroke: 2px #fff; text-shadow: none; } } .js .frame-type-wpwa_ce_agency_history #parallax-headline span, .js .frame-type-wpwa_ce_agency_history #parallax-headline-first span{ text-transform: uppercase; display: block; line-height: 1.1em; font-size: 40px; width: 100%; } .js .frame-type-wpwa_ce_agency_history #parallax-headline span:nth-of-type(odd), .js .frame-type-wpwa_ce_agency_history #parallax-headline-first span:nth-of-type(odd){ transform: translateX(200%); } .js .frame-type-wpwa_ce_agency_history #parallax-headline span:nth-of-type(even), .js .frame-type-wpwa_ce_agency_history #parallax-headline-first span:nth-of-type(even){ transform: translateX(-200%); } .js .frame-type-wpwa_ce_agency_history{ display: block; } .js .frame-type-wpwa_ce_agency_history #code1, .js .frame-type-wpwa_ce_agency_history #code2, .js .frame-type-wpwa_ce_agency_history #star, .js .frame-type-wpwa_ce_agency_history #disquette, .js .frame-type-wpwa_ce_agency_history #first-website, .js .frame-type-wpwa_ce_agency_history #wpwaishere, .js .frame-type-wpwa_ce_agency_history #team, .js .frame-type-wpwa_ce_agency_history #services, .js .frame-type-wpwa_ce_agency_history #parallax-headline, .js .frame-type-wpwa_ce_agency_history #parallax-headline-first, .js .frame-type-wpwa_ce_agency_history .pulse{ position: absolute; display: block; } /*.js .frame-type-wpwa_ce_agency_history #code1,*/ /*.js .frame-type-wpwa_ce_agency_history #code2,*/ /*.js .frame-type-wpwa_ce_agency_history #star,*/ .js .frame-type-wpwa_ce_agency_history #disquette, .js .frame-type-wpwa_ce_agency_history #first-website, .js .frame-type-wpwa_ce_agency_history #wpwaishere, .js .frame-type-wpwa_ce_agency_history #team, .js .frame-type-wpwa_ce_agency_history #services, .js .frame-type-wpwa_ce_agency_history #parallax-headline, .js .frame-type-wpwa_ce_agency_history #parallax-headline-first, .js .frame-type-wpwa_ce_agency_history .pulse { opacity: 0; } .js .frame-type-wpwa_ce_agency_history #code1, .js .frame-type-wpwa_ce_agency_history #code2, .js .frame-type-wpwa_ce_agency_history #star{ opacity: 1; } .frame-type-wpwa_ce_agency_history #code1 { right: 15px; top: 0; width: 70%; max-width: 250px; } .frame-type-wpwa_ce_agency_history #code2 { left: 15px; bottom: 5%; } .frame-type-wpwa_ce_agency_history #star { top: 10%; left: 50%; transform: translate(-50%, -10%); height: auto; width: 90%; } .frame-type-wpwa_ce_agency_history .pulse { bottom: 25%; left: 50%; transform: translate(-50%, -10%) scale(1); width: 90%; font-size: 25px; text-align:center; /*box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);*/ animation: pulse-white 1.8s infinite; } .frame-type-wpwa_ce_agency_history #disquette { top: 20%; left: 50%; width: auto; height: 70%; z-index: 2; } .frame-type-wpwa_ce_agency_history #first-website { top: 40%; left: 50%; transform: translate(-50%, -40%); height: auto; width: 90%; } .frame-type-wpwa_ce_agency_history #wpwaishere { top: 40%; left: 50%; transform: translate(-50%, -40%); width: 60%; } .frame-type-wpwa_ce_agency_history #team { top: 40%; left: 50%; transform: translate(-50%, -40%); height: auto; width: 90%; } .frame-type-wpwa_ce_agency_history #services { top: 30%; left: 50%; transform: translate(-50%, -30%); height: 60%; width: auto; } @media (min-width: 640px), (orientation: landscape) { .frame-type-wpwa_ce_agency_history #star { width: auto; height: 90%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .frame-type-wpwa_ce_agency_history #parallax-headline { top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); } .frame-type-wpwa_ce_agency_history #disquette, .frame-type-wpwa_ce_agency_history #line-disquette { width: auto; height: 60%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .frame-type-wpwa_ce_agency_history #code1 { width: 30%; right: 15px; } .frame-type-wpwa_ce_agency_history #code2 { width: 30%; bottom: 0; left: 15px; } .frame-type-wpwa_ce_agency_history #first-website, .frame-type-wpwa_ce_agency_history #wpwaishere, .frame-type-wpwa_ce_agency_history #team, .frame-type-wpwa_ce_agency_history #services { top: 50%; left: 50%; width: auto; transform: translate(-50%, -50%); height: 70%; } } @media (min-width: 768px) and (orientation: portrait){ .frame-type-wpwa_ce_agency_history .inner { height: calc(100vh - 120px); } .frame-type-wpwa_ce_agency_history #code1 { right: 15px; top: 0; width: 70%; max-width: 400px; } .js .frame-type-wpwa_ce_agency_history #parallax-headline span, .js .frame-type-wpwa_ce_agency_history #parallax-headline-first span{ font-size: 80px; } .frame-type-wpwa_ce_agency_history #code2 { left: 15px; bottom: 5%; } .frame-type-wpwa_ce_agency_history #star { top: 5%; left: 50%; transform: translate(-50%, -40%); height: auto; width: 80%; } .frame-type-wpwa_ce_agency_history #disquette { top: 40%; left: 50%; transform: translate(-50%, -40%); height: auto; width: 50%; z-index: 2; } .frame-type-wpwa_ce_agency_history #first-website { top: 40%; left: 50%; transform: translate(-50%, -40%); height: auto; width: 50%; } .frame-type-wpwa_ce_agency_history #wpwaishere { top: 40%; left: 50%; transform: translate(-50%, -40%); width: 50%; height: auto; } .frame-type-wpwa_ce_agency_history #team { top: 40%; left: 50%; transform: translate(-50%, -40%); height: auto; width: 60%; } .frame-type-wpwa_ce_agency_history #services { top: 30%; left: 50%; transform: translate(-50%, -30%); height: auto; width: 50%; } } @media (min-width: 1024px) { .js .frame-type-wpwa_ce_agency_history #parallax-headline span, .js .frame-type-wpwa_ce_agency_history #parallax-headline-first span{ font-size: 80px; } .js .frame-type-wpwa_ce_agency_history .inner { height: calc(100vh - 120px); } .frame-type-wpwa_ce_agency_history .pulse{ bottom: 5%; } .frame-type-wpwa_ce_agency_history #code1 { width: 30%; top: 5%; right: 25%; bottom: auto; z-index: 3; } .frame-type-wpwa_ce_agency_history #code2 { width: 300px; top: auto; bottom: 40%; } .frame-type-wpwa_ce_agency_history #star { height: auto; width: 600px; /*top: 45%;*/ /*left: 50%;*/ /*transform: translate(-50%, -45%);*/ } .frame-type-wpwa_ce_agency_history #first-website{ top: 45%; left: 50%; transform: translate(-50%, -45%); } .frame-type-wpwa_ce_agency_history #services{ top: 45%; left: auto; right: 50%; transform: translate(50%, -45%); } .frame-type-wpwa_ce_agency_history #wpwaishere{ bottom: 65%; top: auto; left: 50%; transform: translate(-50%, 65%); } .frame-type-wpwa_ce_agency_history #team{ bottom: 65%; right: 50%; top:auto; left: auto; transform: translate(50%, 65%); } /*.frame-type-wpwa_ce_agency_history #services,*/ /*.frame-type-wpwa_ce_agency_history #first-website,*/ /*.frame-type-wpwa_ce_agency_history #wpwaishere,*/ /*.frame-type-wpwa_ce_agency_history #team{*/ /* top: 45%;*/ /* left: 50%;*/ /* transform: translate(-50%, -45%) scale(0);*/ /*}*/ /*.frame-type-wpwa_ce_agency_history #services,*/ /*.frame-type-wpwa_ce_agency_history #first-website,*/ /*.frame-type-wpwa_ce_agency_history #wpwaishere,*/ /*.frame-type-wpwa_ce_agency_history #team{*/ /* bottom: 65%;*/ /* left: 50%;*/ /* transform: translate(-50%, -45%) scale(0);*/ /*}*/ .frame-type-wpwa_ce_agency_history #disquette { height: 60%; width: auto; } .frame-type-wpwa_ce_agency_history #services { /*right: 5%;*/ /*left: auto;*/ width: 160px; height: auto; /*top: 5%;*/ /*transform: translate(0);*/ /*z-index: 5;*/ } .frame-type-wpwa_ce_agency_history #first-website { /*top: 5%;*/ /*left: 5%;*/ height: auto; width: 250px; /*transform: translate(0, 0);*/ } .frame-type-wpwa_ce_agency_history #wpwaishere { /*bottom: 5%;*/ /*left: 15%;*/ /*top:auto;*/ height: auto; /*right: auto;*/ width: 200px; /*transform: translate(0, 0);*/ } .frame-type-wpwa_ce_agency_history #team { /*right: 10%;*/ /*left: auto;*/ /*bottom: 5%;*/ height: auto; /*top: auto;*/ width: 250px; /*transform: translate(0, 0);*/ } } @media (min-width: 1400px) { .js .frame-type-wpwa_ce_agency_history #parallax-headline span, .js .frame-type-wpwa_ce_agency_history #parallax-headline-first span{ font-size: 90px; } .frame-type-wpwa_ce_agency_history #code1 { width: 40%; /*top: 5%;*/ /*right: 30%;*/ bottom: auto; z-index: 3; } .frame-type-wpwa_ce_agency_history #code2 { width:400px; /*top: auto;*/ /*bottom: 40%;*/ } .frame-type-wpwa_ce_agency_history #star { height: auto; width: 600px; /*top: 45%;*/ /*left: 50%;*/ /*transform: translate(-50%, -45%);*/ } .frame-type-wpwa_ce_agency_history #disquette { height: 60%; width: auto; } .frame-type-wpwa_ce_agency_history #services { /*right: 5%;*/ /*left: auto;*/ width: 200px; height: auto; /*top: 5%;*/ /*transform: translate(0);*/ z-index: 5; } .frame-type-wpwa_ce_agency_history #first-website { /*top: 5%;*/ /*left: 5%;*/ height: auto; width: 300px; /*transform: translate(0, 0);*/ } .frame-type-wpwa_ce_agency_history #wpwaishere { /*bottom: 5%;*/ /*left: 15%;*/ /*top:auto;*/ height: auto; /*right: auto;*/ width: 250px; /*transform: translate(0, 0);*/ } .frame-type-wpwa_ce_agency_history #team { /*right: 10%;*/ /*left: auto;*/ /*bottom: 5%;*/ height: auto; /*top: auto;*/ width: 270px; /*transform: translate(0, 0);*/ } } @media (min-width: 1800px) { .js .frame-type-wpwa_ce_agency_history #parallax-headline span, .js .frame-type-wpwa_ce_agency_history #parallax-headline-first span{ font-size: 120px; } .frame-type-wpwa_ce_agency_history #star { height: auto; width: 700px; /*top: 45%;*/ /*left: 50%;*/ /*transform: translate(-50%, -45%);*/ } .frame-type-wpwa_ce_agency_history .pulse { bottom: 20%; } } @keyframes pulse-white { 0% { transform: translate(-50%, -10%) scale(0.95); opacity: 0; } 70% { transform: translate(-50%, -10%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -10%) scale(0.95); opacity: 0; } } As you can see the elements are placed at the beginning using top: 45%; left: 50%; transform: translate(-50%, -45%); From that Gast counts a negative pixel value. If I set this in JS instead of CSS (initial position) primaryTl.to(".frame-type-wpwa_ce_agency_history #first-website, .frame-type-wpwa_ce_agency_history #wpwaishere", {xPercent:-50, yPercent:-45, left:"50%", top:"45%"}); I still get this at the end in the browser. Notice the negative value and the presence of 2 translate top: 45%; left: 50%; transform: translate(-50%, -45%) translate(0px, -99.2667px); z-index: auto; Do you have any clue what I am missing? I've made a video because I can't host images on codepen. Many thanks. bug-gsap(1).mp4

Thanks for your support. I'll make a version, post it and explain what I want

I haven't even start. My question is more general, not really related to this animation. Basically a first intro scene, no scrubbing there. Then scrubbing but the scrub should only "triggers" the next scene. If an element goes from opacity 1 to 0 inside of a scene, I don't want the scroll the animate each steps from 1 to 0. It should just triggers the animation "1 to 0". My question is more a conceptual question about the best way to structure that kind of animation.

Hello, I have an animation that requires a mix of scrubbed animations and non-scrubbed animations. The first "scene" of my animation should be a fadein of several elements with a "scroll to animate" text that pulses. At this moment I don't want any scrubbing. But if the user starts scrolling down I want a scrub only between two scenes. Let's say that on the first scene all the elements have a fadein effect then the user starts scrolling down and when he scrolls down those elements have their y coordinate changed as a transition to the next scene. In this case I want the scrub to only allow jumping between scenes. I've found snapTo(), using .add("scene") to trigger many animations at the same time. I've also seen the concept of master timeline. Does this mean that the master timeline should have a scrub option to true and the other not? I'm a bit confused on how to structure this. Many thanks for the feedbacks!

Yes in between I've understood my problem and wanted to remove this post

I guess I need stroke in order to animate it as I wish...but I won't get the line and the arrows as a fat stroke

Hello, I am trying to play with DrawSVG and have a problem animating the paths of this SVG. I'm surely missing something but only the thumbs are animated. The other paths are ignored somehow. Can someone show me the path? Many thanks And secondly I would like to animate the line with the gradient. Is it doable or can't be because of the fill: url()?