geogeo

Hi Zach, Thanks so much for the reply, that's definitely more of the right idea, but when the user starts scrolling you're not snapped to the first section. But then the scrollto kicks in for the second section onwards. Any ideas? Many thanks again! Georgia

Hi there, I've used the below forum to create a fullpage scroll effect. However, i've found that unless the first section (the header) is height: 100vh, then as soon as you load the page the you're scrolled down to the next section because the "scroller-start" is already past the "start" position of the scrollTrigger. Is there a way to kill the scrollTrigger on load and only scroll when a user is scrolling? Please see attached codepen demo Many thanks in advance Georgia

Hey akapowl! That is exactly what I need thanks so much! However I'm having some issues with the "savestyles" part. I've updated the codepen to show: Blue box when the screen is < 999px and red box when screen > 1000px Starting from full screen I would assume to see that after the user has scrolled the red box is rotated 19deg. As soon as I start resizing the screen the red box styles are reverted and the box is no longer rotated, I would assume this would only happen at the breakpoint 1000px? Starting from a small screen < 999px, after the scroll the blue box runs as expected, but when resizing the screen after I pass the breakpoint the red box isnt rotated, which is the outcome I would expect. Am I looking at this wrong? Many thanks, Georgia

Hi there, I've created a basic codepen to demonstrate my issue. I'm trying to get my ScrollTrigger to run when the screen size is > 1200px. If the screensize starts < 1200px it works as expected and doesnt run, if I then resize the screen to > 1200px the scrollTrigger initiates and works as expected. However if I start with the screen > 1200px and resize to < 1200px, the scrollTrigger animation is still present, but I would expect it not to be. I'm assuming this is more my bad JS than an issue with scrollTrigger, but i've searched around and cant find the answer! Any help appreciated! Many thanks, Georgia

Thanks so much, that is a much better solution! Here's what I got: const design = gsap.timeline({ ease: "power1.out", scrollTrigger: { trigger: '.section--design', start: 'top center', end: 'center center', markers: true, toggleActions: 'play none reverse none', } }); design .from('.section--design .semi-circle-right', { x : -485 } ) .from('.section--design h2, .section--design p', { opacity : 0, y: 40, stagger: .2, }, "<.5" );

Hi .. so I've been playing around with it and I suppose the way to do it would be to add a scroll trigger for each item in the section .. which works fine! Heres the code for ref: Many thanks! gsap.from('.section--design .semi-circle-right', { x : -485, ease: "power.out", scrollTrigger: { trigger: '.section--design', start: 'top center', end: 'center center', } }); gsap.from('.section--design .wp-block-column h2, .section--design .wp-block-column p', { opacity : 0, delay: 1, y: 40, stagger: .2, scrollTrigger: { trigger: '.section--design', start: 'top center', end: 'center center', } });

Hi, Many thanks for your quick reply! I thought that might be the case, but I just couldn't work out how to run an animation after a scroll trigger had completed. I've tried adding the second tween as a function / variable and then try to run it on "onComplete" or "onLeave" etc. but the callbacks all seem to run on page load (I know I must be doing it wrong) Unfortunately I cant use the Loop as each section has a slightly different animation, but I assume its possible to have more than one scroll trigger on the page? I just need to get each section to work correctly. Many thanks for the help - very much appreciated! // const sectionTitle = () => { let sectionTitle = gsap.from('.section--design .wp-block-column h2, .section--design .wp-block-column p', { opacity : 0, delay: 1, y: 40, stagger: 1, }); gsap.from('.section--design .semi-circle-right', { x : -485, ease: "power.out", // onComplete: sectionTitle.play(), scrollTrigger: { trigger: '.section--design', start: 'top center', end: 'center center', scrub: false, markers: true, onLeave: sectionTitle.play(), } });

Hi there, I've created the following timeline which I want to animate each section once the user has scrolled into view. Theres two sections "section--design" & "section--dev" which appear after each other on the page and i'd assume the animations would run in each section depending on the scrollTrigger ... however theyre not! The animations are very patchy and seem to animate not in order and without any duration or ease. I'm new to this so might be completed approaching this wrong?! Any help much appreciated! const design = gsap.timeline({ duration: 2 }); design // section--design .from('.section--design .semi-circle-right', { x : -485, ease: "power.out", scrollTrigger: { trigger: '.section--design', start: 'top center', end: 'center center', scrub: false, markers: true, } }) .from('.section--design .wp-block-column h2, .section--design .wp-block-column p', { opacity : 0, delay: 1, y: 40, stagger: 1, }) // section--dev .from('.section--dev .semi-circle-left', { x : 485, ease: "power.out", scrollTrigger: { trigger: '.section--dev', start: 'top center', end: 'center center', scrub: false, // markers: true, } }) .from('.section--dev .wp-block-column h2, .section--dev .wp-block-column p', { opacity : 0, delay: 1, y: 40, stagger: 1, });