Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

OSUblake last won the day on December 3

OSUblake had the most liked content!

OSUblake

Administrators
  • Posts

    7,561
  • Joined

  • Last visited

  • Days Won

    643

Community Answers

  1. OSUblake's post in VERTICAL PROGRESS BY DOCUMENT HEIGHT was marked as the answer   
    You just need to create a ScrollTrigger without a trigger. 😉
     

    See the Pen abLOMrN by GreenSock (@GreenSock) on CodePen
     
  2. OSUblake's post in ScrollTrigger color animation only works top to bottom was marked as the answer   
    How about this?
     

    See the Pen xxXGBPb by GreenSock (@GreenSock) on CodePen
     
  3. OSUblake's post in Facing issue to with MorphSVGPlugin.convertToPath was marked as the answer   
    Welcome to the forums @Patrick R
     
    Unfortunately, convertToPath will not work on text. About the only JS library that would even be able to handle that would be opentype.js. It would be much better to just convert your text to a path with an SVG editor.
  4. OSUblake's post in GSDevTools only show global timeline was marked as the answer   
    Welcome to the forums @kfconeone 
     
    This was just fixed...
     
     
     
     
  5. OSUblake's post in ScrollTrigger.kill() sometimes not working was marked as the answer   
    Killing is synchronous. The only things that are asynchronous are events like refresh as it debounces resize events, so your window resize event probably won't be in sync with ScrollTrigger's refresh event.
     
    Have you tried to kill everything just to see.
    ScrollTrigger.getAll().forEach(t => t.kill());  
    I would probably also try killing your timeline too. When I kill something, I like to kill everything else associated with it just so I know everything is fresh and exactly how I want it.
     
    this.timeline.scrollTrigger.kill(); this.timeline.kill();  
     
  6. OSUblake's post in Scrub no longer works after adding another scrolltrigger was marked as the answer   
    Welcome to forums @FuryWebdev
     
    Check out our Most Common ScrollTrigger Mistakes article. You should not nest ScrollTriggers inside a timeline. 
     
     
  7. OSUblake's post in mixBlendMode: "color" while Animation not working on Safari was marked as the answer   
    When all else fails, there's always canvas, which has every type of blend mode.
    https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
     

    See the Pen KKXKOYq by GreenSock (@GreenSock) on CodePen
  8. OSUblake's post in Reverse single animation on single click was marked as the answer   
    Welcome to the forums @Tiba
     
    You need to create your animations outside of the event handler.
     

    See the Pen XWeWpKm by GreenSock (@GreenSock) on CodePen
     
  9. OSUblake's post in GSAP Hover Timeline Animation was marked as the answer   
    Hi Akhil,
     
    You would need to change the zIndex before the animation starts, kind of like this...
     

    See the Pen QWqWpNN by GreenSock (@GreenSock) on CodePen
     
  10. OSUblake's post in Weird graphics error in macOS Safari was marked as the answer   
    No idea. Sometimes setting will-change: transform; in the CSS can help, but I've only really noticed that issue in Chrome. 
    https://developer.mozilla.org/en-US/docs/Web/CSS/will-change
     
    Try putting together a minimal demo that can recreate the issue, and you'll likely get better answers as we'll be able to test and experiment with it.
     
  11. OSUblake's post in How can I close sub-level items properly, in my Accordion (React)? was marked as the answer   
    Welcome to the forums @enda
     
    Did you see our React tutorials?
     
     
    Changing the input causes React to re-render, which calls your CateGory component again, which is clearing out the DeepAnim array you created in your effect. So just comment this out.
     
    const DeepAnim = useRef([]); // for the animations // Don't do this for an array that needs to persists between renders // DeepAnim.current = [];  
    Also, a timeline doesn't have an ease property. Perhaps you meant to use it in the defaults.
     
    // bad const headani = gsap.timeline({ ease: "expo.inOut" }); // good const headani = gsap.timeline({ defaults: { ease: "expo.inOut" } });  
     
  12. OSUblake's post in ScrollTrigger not functioning with Next was marked as the answer   
    Welcome to the forums @yousoumar
     
    It should be scrollTrigger instead of ScrollTrigger.  
     
     
     
     
  13. OSUblake's post in Relative values using ScrollTrigger.create was marked as the answer   
    First, you would need another animation.
     
    let anim = gsap.to( '.title', { x: '+=50' } ); let anim2 = gsap.to( '.title', { x: '+=50' } ); ScrollTrigger.create({ trigger: ".triggers .first", scrub: true, start: 'top top', markers: true, animation: anim, }); ScrollTrigger.create({ trigger: ".triggers .second", scrub: true, start: 'top top', //end: 'top center', markers: true, animation: anim2, immediateRender: false })  
    Notice the use of immediateRender on the second ScrollTrigger...
     
     
  14. OSUblake's post in BEST SOLUTION TO ACHIEVE MULTIPLE SCROLLTRIGGER ELEMENT was marked as the answer   
    You can make your timeline longer by adding some dummy tweens to the end of it.
     
    ... tl.fromTo(".div26",{y:50,autoAlpha: 0}, {duration: .5, y: 0,autoAlpha: 1}); // add 1 second to the timeline tl.set({}, {}, "+=1");  
     
    It's going to start pinning when start passes the scroller-start bar. To pin it higher, you need to set the start to be higher.
     

     
  15. OSUblake's post in Start loop animation using MotionPath from the end of the path was marked as the answer   
    What was wrong with using the progress like I showed earlier?
     

    See the Pen ZEJNrzY by GreenSock (@GreenSock) on CodePen
     
    Either way, the main idea here is that you advance an animation's progress or time to one cycle ahead and it should display as if one repeat has already happened.
  16. OSUblake's post in Laggy Animation on Load was marked as the answer   
    You're not missing anything. The initial page load just puts a lot of work on the browser. If you open the activity/performance monitor on your computer, you'll see the CPU spike when the page loads, which can cause any type of animation to lag a bit, not just GSAP.
     
  17. OSUblake's post in How to drag to change the shape of SVG paths? was marked as the answer   
    Thanks!!! 🙌
     
    So I had problems with your demo because the SVG had a bunch of transforms on it, so the SVG coordinates don't match up nicely with the label, so I just made my own version. It was a little harder than I initially thought due to way the angles can flip depending on how you drag stuff around.
     

    See the Pen LYjaWQz by GreenSock (@GreenSock) on CodePen
     
    Also, if you want to use the util selector to get an element, you need to do it like this as it returns an array.
     
    const triangle = q("#triangle")[0];  
  18. OSUblake's post in What is "Hamster()" in GSAP Draggable was marked as the answer   
    Welcome to the forums @khairunnisaas
     
    Draggable doesn't have any hamsters 🐹
     
    Best bet is to look at what scripts are being loaded in that pen...
     

     
    Looks like HamsterJS is a library to help with mouse wheel events...
    https://github.com/monospaced/hamster.js
     
     
  19. OSUblake's post in How to disable ScrollTrigger auto play when an element is visible after page load was marked as the answer   
    Hi flim, 
     
    Check out the new .isInViewport() method.
    https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.isInViewport()
     
    So if it's in the viewport, just set the animation's progress to 1.
    if (ScrollTrigger.isInViewport(myElement)) { myAnimation.progress(1); }  
  20. OSUblake's post in Reversing a nested timeline in parent timeline was marked as the answer   
    You would need to use smoothChildTiming like this...
     
    const tl = gsap.timeline({ smoothChildTiming: true }); tl.add(nested); tl.call(() => nested.reverse());  
  21. OSUblake's post in Adjustable Scrubber using Draggable plugin was marked as the answer   
    To do this, I wouldn't actually drag the handle. I would use one of my favorite Draggable techniques, using a proxy element that's not in the DOM. The basic idea is that you use a trigger to start dragging the proxy element, and then apply those changes to the actual target.
     
    This should help you get started.
     

    See the Pen WNEgKar by GreenSock (@GreenSock) on CodePen
     
  22. OSUblake's post in Force repeatRefrech on duration was marked as the answer   
    Welcome to the forums @PikabobAlex
     
    What I like to do is just make a function that will call itself on complete, kind of like this.
     
    animate() function animate() { gsap.timeline({ onComplete: animate }) .to(foo, { duration: "random(1, 3)", ... }) }  
  23. OSUblake's post in Scrolltrigger breaks on resize was marked as the answer   
    You are using export, which won't work in a normal CodePen.
     
    You don't need to listen for resizes as ScrollTrigger does that automatically. For values that are dynamically calculated, you should use function based values.
     
    this.timeline = gsap.timeline(scrollTrigger:{ trigger: this.$slidesContainer, start: 'top+=80px top+=350px', end: () => '+=' + $(this.$slides[0]).width() * this.$slides.length, scrub: 0.1, invalidateOnRefresh: true }) .to(this.$slides, { x: () => { let slideWidth = $(this.$slides[0]).width() let slidesWidth = slideWidth * this.$slides.length return -(slidesWidth + 380) }, ease: 'none' })  
  24. OSUblake's post in How to end the animation before scrollTrigger ends was marked as the answer   
    Welcome to forums @Malik Turk
     
    You can make your timeline a little longer with some empty space in it like this.
     
    let tl = gsap.timeline(); tl.fromTo(marqueeText, { x: 0 }, { x: 100 }) .set({}, {}, "+=0.5"); // dummy tween to extend the timeline another 0.5 seconds ScrollTrigger.create({ animation: tl, trigger: document.querySelector('.marquee-image') start: 'top', end: 'bottom', pin: true, scrub: true, pinType: 'transform', });  
  25. OSUblake's post in Gsap 3.8.0 PixiPlugin Bug? was marked as the answer   
    The PixiPlugin works with DisplayObjects, which would be like a Sprite, Graphics, Container, or any other PIXI object that extends PIXI.DisplayObject. Filters do not extend DisplayObject.
    http://pixijs.download/release/docs/PIXI.DisplayObject.html
     
    For your animation, you will need to target the properties directly. 
    gsap.to(displacementFilterCloud.scale, { x: 180, y: 180 })  
×