artstyle

thanks man, the problem with overlapping is solved. but what with the question about timeline. why its changing the div height? why when i change "start" and "end" triggers the content moves out? try to change s2 timeline to start: "top center", end: "bottom center", u can see how the moves down

Hey guys! look at the section 5 with 3 images its overlapping the section 4. why? and why the timeline changes the div height? if i change s2_timeline start and end triggers to start: "top center", end: "bottom center", the whole layout is moves out, why? even if i fix the height of the section to 1000px it will be 1500+ px in the limeline why?

i got it. it should be onEnterBack: () => enterTL.play(), thanks!

i added onLeave: () => enterTL.reverse() and paused: false it works now but how do i make it play reverse onleaveback? i added nLeaveBack: () => enterTL.play(), it doesnt work

not exactly I want it to 1. start revealing animation immedeatly without start scrolling (i must change pause:true i guess) 2. on leave revealing animation must reverse playback

updated

Hello. please look at the section it has a timeline like this let s2_tl = gsap.timeline ({ scrollTrigger: { trigger: ".s2", start: "top top", end: "bottom top", scrub: 1.5, pin: true, toggleActions: "play reverse play reverse", } }); s2_tl .to(".triangle",{rotate: 333}); but what if i want to add this effects on enter, how it should look like? i want to apply them onenter and remove onleave .s2 section .from(".section2-text2",{x: -500,opacity: 0,duration: 1.5,ease: "expo.inOut"}) .from(".section2-heading",{x:-300,opacity: 0,duration: 1.5,ease: "expo.inOut"},"<") .from(".s2-img1",{x:1000,opacity: 0,duration: 1,ease: "expo.inOut" },"<") .from(".s2-img2",{x:1000,opacity:0,duration: 1,ease: "expo.inOut" },"<") .from(".triangle",{opacity:0,duration:0.5,delay:0.5,ease: "expo.inOut" },"<");

its glitching... i dont know why... sometimes the bike just dissapears... http://4r7.ru/HLP/index.html script for the bike is^ gsap.to('.s6-bike-bgr',{ scrollTrigger: { trigger: ".s6-bike-bgr", start: "center center", end: "bottom center", pin: true, markers: true, } }); i think the problem is here

@akapowl thanks mate thats very close to what i need. but it looks a bit complicated. i thought there is an easier way to do such animation

im sorry guys maybe i dont understand something but ive read the documentation and i still dont understand how to manipulate with the element during the timeline at each exact point. i draw a scheme of what i want to see. i hope you understand the question. thanks for help http://4r7.ru/scroll/nnm.jpg example: settings: scrolltrigger(scrub,pin) i have a section, let it be 4900px and i have a multiple images which must be animated at exact position on scroll. i want to: 1. scroll first 1000px with empty space 2.the image with bike appears from the bottom 3. at 1900px the image with bike pins to next 2900px then immediately dissapears 4. from 2900px to 3900px many images with lamps flying from bottom to top on scroll and dissapears 5. at 3900px the bike immedeatly appears and pins to the end of the section. the text slowly appears one by one on scroll should i "pin" the section during scrolltrigger. i dont really understand how to "pin" something only where i need it to pin(example from 1000px to 2000px)

the thing with subtimelines is something close to what i want but i thought there is an easier way to do this... the point is i have a list of headings which i want to highlight at scroll(only 1 heading at time)... i cant show you my example bcause its on local server but i think you understand

@akapowl i want each letter change font and then change back to normal on scroll and only 1 letter at once

https://codepen.io/aptypkaa/pen/poypLJq i want only one letter to change the font-size

hey guys. i want to make an effect like in scrollmagic preview i think i can use stagger for that but i cant make the letters go back to white. they all going to red only forward. how can i make them go back to white? i want to highlight only 1 letter at once

hello. i have two issues with timeline 1. why is the container setting up to overflow:hidden? 2.how to make move animation to x:400 in the first part of the timeline? duration: 0.3 doesnt work(example i want to split animation in 3 parts. the container is 300vh. i want to move to x:400 in first 100vh then from 100 to 200 make some elements appear. and from 200 to 300 make the section dissappear. how can i manipulate with animation time inside the timeline?(scrub and pin must be activated))

check this out. when scroll-end reaches the end trigger the perspective is glitching. i dont understand why

Hello i wondering whats better to do with GSAP, make an animation with many images or play a video on scroll? the target is lightweight and high quality what do you think? want to something like this https://codepen.io/aptypkaa/pen/NWxEbWP https://codepen.io/aptypkaa/pen/rNxQMRj

thanks but skew its not something i want to... perspective is good but..

i was thinking about the problem with perspective but i cannot find any solution. i want to do the animation in 3 steps 1. move from right to center without any changes(there will be multiple images) 2. then make a sharp turn rotateY 55deg to 0deg 3. and then decrease image size and fade off

nope. its still changes the rotate Y attr... look closer

what do u mean? section4tl.to(".test",{x: 0, perspective: 2000, rotateY: 55,}); i tried this and this doesnt work could you please fix it on my example

yes thats what i want to achieve. but if you look closer it changes rotateY property too even if i didnt want to. and it glitches an the end i dont know why

translate X changes the rotateY attribute too, why? i just want to move the image from right to left and you can see how it glitches at the end whyyy?

hello i want to: 1. make the same effect but the first slide must be z-index: -100 and position fixed https://codepen.io/aptypkaa/pen/YzqNGzx 2. in this pen https://codepen.io/aptypkaa/pen/YzqNGzx i want to define section 3 his own scroll start and end triggers.. how to do this?

https://codepen.io/aptypkaa/pen/eYZpYMM like that but 3 in a row. and i want to play with border position and maybe to be able to force them changing one by one or 3 at the same time