JoeH

Hi, I was hoping someone might point me in the right direction. I am creating a horizontal scroll of various sections, see this for my basic setup - https://codepen.io/GreenSock/pen/ZEpNLZa My goal is to when someone clicks on one of the sections animate it to be full width, and center. I have animated it full width no problem by just doing function sectionClick(el) { TweenLite.to(el.target, {width: window.innerWidth}) } But I am not sure how to animate the pin so that it is centered. The end position should be the section is full width and only it is visible. Hope this makes sense. Thanks

Hi Cassie. This looks like what I need. However I'm wondering if there would be a way to still pin the carousel at the top of the page until the end of the carousel has been reached and then resuming the normal flow of the page?

Hi all, Looking for some advice please or maybe a link to an example which might help me with a problem I am facing. I have a pinned carousel, it is not using scrub, I simply want each slide in the carousel to transition once the user has scrolled a certain amount. Ideally it would work like this, user scrolls and first slide begins transitioning, while the slide is transition any further triggering of a subsequent slide via scroll would be somehow disabled until this slide had finished transitioning. The reason we need this is because the slide transition takes about 1.5 seconds, and if the user scrolls very fast it does not have time to transition through all the slides in the carousel. Thanks for any tips/advice

Ahhh! That was it, just started using Bootstrap 5 which has this applied to :root by default. Thanks

I searched for this issue but could not find any mention of it, I've checked the Docs and I seem to be doing this correctly, however the window will not scroll with an easing, it just seems to use a default one which starts very slow then suddenly accelerates and stops suddenly. Here is my code: var thumbs = document.getElementsByClassName('col'); Array.prototype.forEach.call(thumbs, function(t) { t.addEventListener('click', function() { gsap.to(window, 0.6, {scrollTo: '#info-section', ease:"power2.inOut"}); }) }); I was thinking that maybe I hadn't included the EasePack or something so I tried to just animate a random element on the page to a Y value, and this worked with the easing I had declared it to use. Which makes me wonder if it is a problem with scrollTo?

You've been more than a great help, I am now using a better smooth scrolling method and it is playing nicely with all my other animations, just not this one (soon to be working). Thanks for updating the demo.

The codepen I have shared is the "Locomotive Scroll with ScrollTrigger scrubbing and pinning" demo from the ScrollTrigger.scrollerProxy() page, but it is the same as my setup essentially. My question is how can I achieve something like this - https://codepen.io/akapowl/pen/7c9f1aaa4340ace9c4a05102ba89a962 Notice how when the item pins it moves through each of the titles one by one. I have tried this with the Locomotive Scroll setup but it doesn't work, it waits until the pin is ended before triggering. For example: gsap.timeline({ scrollTrigger: { trigger: ".pinned", start: "top -=10%", end: "+=100%", scrub: true, scroller: '.smooth-scroll' } }) .to('.sectors-desktop_text_1', {opacity: 1}) This is my attempt to get this to trigger when the pin has been scrolled through by 10%. The pin looks like this: gsap.timeline({ scrollTrigger: { trigger: ".pinned", start: "top top", end: "bottom top", pin: true, scroller: '.smooth-scroll' } }) As I said, this doesn't trigger until the pin is broken. I've tried to remove the scroller value but this doesn't work, nothing is triggered at all. Do I need to set the scroller as something else in order to get it to trigger 10% (or any %) through the pin?

Again, thanks. That smooth scroll effect actually seems smoother, awesome!

So I got this working, works great. However it doesn't seem to be compatible with this smoothscrolling -> So we have removed this for now. If anyone knows a fix for this please let me know.

Hey @akapowl You are a life saver, thank you so much!

Hi all, Just trying to figure out how to best achieve something. In my screenshot you can see a section on the page I am animating. As you can see there is an image on the left and a list of titles on the right. Once the user gets to this section I want the mouse scrolling to basically starting from the first element in the list highlight each word one by one and also the image on the left needs to change when each word becomes highlighted. But I feel like this whole section needs to be pinned for this, and I am wondering if this is possible, because I don't think I can pin this section because everything below it will still be scrolling upwards, so do I need to pin the entire body? Thanks for any suggestions and help.

Perfect! Thanks so much

Hi all, I'm trying to figure out how an the effect from this site is being done: https://dreamstormstudios.com/projects/ar-hunters/ This might be beyond the scope of this plugin so excuse me if this is the case. I'm pretty confident I can change the fill colour of an SVG using ScrollTrigger, however if you scroll to the bottom of the page which I have linked and pay attention to the social icons on the bottom left, you will notice that they seem to change colour exactly inline with the boundary of the background, which makes me think this isn't the fill colour but something else which is being manipulated?

I'm trying to figure out how the relativity works when using the following for example. .to(stageRef.current, {x: '+=' + itemWidthRef.current, duration: 1, ease: "expo.inOut"}) As you can see I am animating x relative to the current position using '+='. My problem is that after a window resize along the x axis it causes this animation to jump before it starts moving, could it be the case that when I resize the window that GSAP still thinks my element is in the same position? This may sound unusual but the reason why I think this is happening is that I have a window resize function which recenters and resizes things, this is a carousel basically and I want it to not be out of proportion on window resize so I am recalculating all the slide dimensions and the full width of the carousel. I'm working in React so was hoping I could try this initial question first in the hope it may be something obvious, and then if more info is needed I will try recreate in codesandbox or something. Thanks Joe

I have a list item which looks like this <li className="menu-list-item" onMouseEnter={menuItemHomeMouseEnter} onMouseLeave={menuItemHomeMouseLeave}> <div className="line" ref={menuItemHomeLineRef}/> <NavLink to="/" exact> Home <span className="mask" ref={menuItemHomeMask1Ref}><span>Home</span></span> <span className="mask" ref={menuItemHomeMask2Ref}><span>Home</span></span> </NavLink> </li> And then I have created my TimelineMax as follows let menuItemHomeAnim = new TimelineMax({paused:true}); menuItemHomeAnim.to(menuItemHomeMask1Ref.current, .6, {skewX: '12deg', translateX: '3px'}); menuItemHomeAnim.to(menuItemHomeMask2Ref.current, .6, {skewX: '12deg', translateX: '-3px'}, '-=0.6'); menuItemHomeAnim.to(menuItemHomeLineRef.current, .6, {scale:1, ease:"elastic.out(0.5, 0.3)"},'-=0.4'); And then my mouseEnter and mouseLeave functions function menuItemHomeMouseEnter() { menuItemHomeAnim.play(); } function menuItemHomeMouseLeave() { menuItemHomeAnim.reverse(); } As far as I can tell from documentation and looking at other examples this should work. However what happens is that the animation plays and then doesn't reverse when the mouse is moved away from the list item. I have checked to see is the menuItemHomeMouseLeave function is triggering and it is.

Sorry yes, it was a flipant remark in my frustration. I managed to figure it out, I didn't need to put it inside the useEffect function because I was already using a Hook to detect mouse movement.

I'm trying to replicate this in React but the cursor goes mental and flies all over the place, the loop then causes my computer to start overheating

Thanks a lot, I've been getting stressed out with work today and you just saved my day!

I haven't had this problem with other plugins apart from Draw SVG, I'm not sure what I am doing wrong, the import directory is correct and the code I am using has worked on other projects. It seems to be out of scope because the line - import drawSVG from "gsap/dist/DrawSVGPlugin"; is not highlighting, it remains greyed out. And of course the animation is not working. I have taken a screenshot

Thanks Zach! What worked was putting the ScrollTrigger.refresh(); After my first line const GalleryType1 = ({assets}) => {

Hi all, I'm not able to provide a CodePen for this I don't think (because I'm using React). I'm using Routes and CSSTransition, the problem arises when going between 2 pages which transition, these pages use the same components. On the page is a component which is a gallery and uses scrollTrigger to animate in each image in the gallery, my code for this is below. What happens is that when the transition is over and the second page has loaded, the scrollTrigger is not triggered (even if I scroll). The unusual part is that if I resize the browser width it triggers. I understand I'm not exactly giving much to go by here so let me know how I can demonstrate the problem better, I can set this up somewhere it this helps. const GalleryType1 = ({assets}) => { const GalleryRef = useRef(null); useEffect(() => { gsap.utils.toArray(GalleryRef.current.children).forEach(section => { gsap.timeline({ scrollTrigger: { trigger:section, start: "center bottom", end: "center top", } }) .to(section.children[0].children[0].children[0], 1, {transform: "scaleX(0)", transformOrigin: "right", ease: "power2.inOut"}) .fromTo(section.children[0].children[0].children[1], {scale: 1.4}, {scale:1, ease: "power2.inOut", duration: 0.9}, '-=0.8') .add(function() { section.children[0].children[0].classList.add('loaded'); }) }); }, []); return ( <> <div id="gallery-type-1"> <div className="container-fluid"> <div ref={GalleryRef} className="row"> {assets.map(({ title, subtitle, image }) => ( <div className="col-6 col"> <div className="gallery-item"> <div className="gallery-image-item-wrapper"> <div className="gallery-item-cover"/> <div className="gallery-item-image" style={{ backgroundImage:"url("+image+")" }}> </div> </div> <div className="text"> <div className="heading">{title}</div> <div className="sub-heading">{subtitle}</div> </div> </div> </div> ))} </div> </div> </div> </> ) }; export default GalleryType1;

That is brilliant, thank you!

Hi, I'm a bit stuck on this animation I'm creating, one side of a path is not overflowing when the shape distorts, it's just on the 'R'. I have included a crude screenshot to show which section I mean. Hoping someone can help me figure this out. Thanks Edit: I've just noticed it happens on the M amd the F also, on the same side.

Hey @ZachSaucier Thanks for the reply, was worth a shot! I'm now wondering about this effect -> https://www.buddha-jones.com/ When you click on the hamburger icon to open the menu, I believe it uses a clip path animation?

Hi all, Just wondering if anyone could tell me how this effect is done on this website -https://shapestudio.co.uk/ It occurs as the page loads after the black section swipes upwards, as you can see the central section which is revealed has wavey edges but then animates and goes straight as it expands to fill the window. I'm guessing this is an SVG effect, but was hoping it could be done with a regular old div. I would be greatful if anyone knows which plugin can achieve this. Thanks in advance.