Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by JoeH

  1. Ahhh! That was it, just started using Bootstrap 5 which has this applied to :root by default. Thanks
  2. 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?
  3. 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.
  4. 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?
  5. Again, thanks. That smooth scroll effect actually seems smoother, awesome!
  6. 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.
  7. Hey @akapowl You are a life saver, thank you so much!
  8. 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.
  9. 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?
  10. 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
  11. 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.
  12. 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.
  13. 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
  14. Thanks a lot, I've been getting stressed out with work today and you just saved my day!
  15. 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
  16. Thanks Zach! What worked was putting the ScrollTrigger.refresh(); After my first line const GalleryType1 = ({assets}) => {
  17. 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;
  18. That is brilliant, thank you!
  19. 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.
  20. 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?
  21. 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.
  22. Got this working as such $(function () { const master = gsap.timeline(); const logoA = timelines.logo(); const introA = timelines.intro(); master .add(introA.play()) .add(function () { // play animation initially. logoA.play(); // Add hover event listener. $('#logo-wrapping').hover(function() { logoA.reverse(); }, function () { logoA.play(); }); }); });
  23. Ok so I think the problem is that the timeline being played through the master timeline is separate from the one I try to play through my hover function. I'm not skilled enough yet to understand why. If I remove the .add(logoA.play()); from the master timeline it then works apart from I need to trigger the animation by creating a mouseOut event.
  24. Hi, I have 2 timelines which play after one another, but then at the end of the 2nd timeline I want to enable a hover effect so that the 2nd timeline reverses and plays based on a mouse hover event. I have the hover effect working on it's own but it just jumps from the start of the timeline to the end when I chain everything together. Here are my 2 timelines const introAnimation = element => { return gsap.timeline({paused: true}) .to("#logo #part-1", 4, {opacity: 0.2, delay: 2}) .to("#logo #part-7", 4, {opacity: 0.2}, '-=4') .to("#logo #part-3", 4, {opacity: 0.2}, '-=4') .to("#logo #part-4", 4, {opacity: 0.2}, '-=4') .to("#logo #part-5", 4, {opacity: 0.2}, '-=4') .to("#logo #part-6", 4, {opacity: 0.2}, '-=4') .to("#logo #part-2", 4, {opacity: 0.2}, '-=4') .to("#logo #part-2", 4, {opacity: 0.4}) .to("#logo #part-2", 8, {rotation: 2000, transformOrigin: "50% 50%", ease: "none"}, '-=8') .to("#logo #part-1", 4, {x: 0, y: 0, rotation: 0, opacity: 1}) .to("#logo #part-7", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4') .to("#logo #part-3", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4') .to("#logo #part-4", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4') .to("#logo #part-5", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4') .to("#logo #part-6", 4, {x: 0, y: 0, rotation: 0, opacity: 1}, '-=4') .to("#logo #part-2", 4, {x: 0, y: 0, rotation: 0, opacity: 0.2}, '-=4') .to("#logo #part-2", 3, {opacity: 1}, '-=2') .to("#tv li", 0.95, {transform: "scaleY(1)", transformOrigin: "bottom right", ease: "expo.inOut"}) .set("#logo-wrapping", {width: '40%'}, '-=0.2') .set("#page", {backgroundColor: 'rgb(15, 59, 65)', delay: 1}, '-=0.2') .to("#tv li", 0.95, {transform: "scaleY(0)", transformOrigin: "bottom right", ease: "expo.inOut"}, '-=0.20') }; const logoAnimation = element => { return gsap.timeline({paused: true}) .to("#logo #part-4", {x: -5, y: 0, rotation: -6, duration: 2}) .to("#logo #part-3", {x: 8, y: -8, rotation: 8, duration: 2}, '-=2') .to("#logo #part-2", {x: -2, y: 8, duration: 2}, '-=2') .to("#logo #part-1", {x: 2, y: -8, rotation: -10, duration: 2}, '-=2') .to("#logo #part-5", {x: 3, y: 4, rotation: -14, duration: 2}, '-=2') .to("#logo #part-7", {x: 10, y: -1, rotation: 4, duration: 2}, '-=2') .to("#logo #part-6", {x: 13, y: 3, rotation: -5, duration: 2}, '-=2') .set('#logo-wrapping', {css: {pointerEvents:"all"}}); }; And then below these is my master timeline, as well as my hover event. $(function () { const master = gsap.timeline(); var logoA = logoAnimation(); var introA = introAnimation(); master .add(introA.play()) .add(logoA.play()); $('#logo-wrapping').hover(function() { logoA.play(); }, function () { logoA.reverse(); }); }); I'm probably doing something fundamentally wrong, but I couldn't find much information online about linking up timelines together, or maybe my javascript skills are not that great yet!