Jump to content

Search the Community

Showing results for tags 'bug'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


  • Learning Center
  • Blog


  • Products
  • Plugins


  • Examples
  • Showcase


  • FAQ


  • ScrollTrigger Demos


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hello Greensock team, I want to report a bug where an element that gets animated and has the clip-path property set to a value containing a viewport unit (vw in this case), gets that value translated into pixel and set as an inline style, overwriting the original style (I don't know why that is necessary but I'm sure there's some reasoning behind this behavior). By itself there is no problem with that but if I resize my screen now (try changing the width of the window in the demo), the size of the circle doesn't change anymore since it's radius got converted from vw to px. Is there any way you could fix this? Thank you for your time Leon
  2. Hello! On version 3.10, when you use .set() or .from() with the ScrollTrigger plugin applied as the first call, they behave like a method on gsap object without any plugins - they just get added as inline style immediately after loading the script. Today I updated my project to version 3.11 and to my surprise, most of the animations were behaving weirdly (easy to notice at fade in animations). After looking things up in DevTools i noticed that now in 3.11 .set() and .from() launches only after getting between the ScrollTrigger's values - start and end. Not sure if it's a bug or an intended thing, but if its a feature I can't find any mentions about this on GSAP's GitHub update page. Example for 3.10 (fadein working as intended) gsap.fromTo( fadeInRef.current?.children || [], { autoAlpha: 0, }, { scrollTrigger: { trigger: fadeInRef.current, start: 'bottom bottom', once: true, end: '+=0', }, stagger: 0.1, autoAlpha: 1, }, ); Example for 3.11 (it's a fix for code above) gsap.set(fadeInRef.current?.children || [], { autoAlpha: 0 }); gsap.to(fadeInRef.current?.children || [], { scrollTrigger: { trigger: fadeInRef.current, start: 'bottom bottom', once: true, end: '+=0', }, stagger: 0.1, autoAlpha: 1, });
  3. Hello! New v3.10 realise brought quite a few interesting new features and it's very exiting. But i'm experiencing slight issue with ScrollTrigger.normalizeScroll(true), body-scroll-lock, scroll-lock and possible other packages or solutions to disable page scrolling is breaking if it used with normalizeScroll (visible scroll bar disappears as expected, but page underneath is still scrollable).
  4. Ibdul

    Broken link found

    The link to MotionPathHelper in the get started page doesn't point to a correct URL, it points to "http://docs/v3/Plugins/MotionPathHelper" instead
  5. Hello! I'm trying to make an accordion for a FAQ with some interesting border decorations. Animating it with pure CSS transitions technically works, but I wanted a smoother animation. Thus, I tried using Flip. However, if you will try going through different elements in codepen example you will notice that the accordion doesn't act as it should - the items jump around, even though it should be just an element height animation. In this case I used max-height to change the item size because it's the only way it can be animated via pure CSS transitions since height alone can't animate between size in pixels and auto (I tried height with Flip, same result). To see how it works with pure css (which is my desired way of movement) just comment out the Flip line from the JavaScript portion and uncomment the transition in .faq-item-container in CSS. This is what I'm getting with Flip when trying to jump between the items. Any advice would be appreciated
  6. Well... I dont know if it's really draggable the cause, but that's the last thing I added on this page and before it wasn't having any problem actually. At the very end ~ 0:29: you can see the page crashing and reloading. It's actually impossible to replicate the issue on Codepen, as it'd mean replicate the whole page.. I guess it'd be too much useless content to view a single section's problem. Following an old thread with @OSUblake I did added the CSS attribute will-change to some elements that ... well... "will-change" with scrolltrigger (😅lol) .. but the issue is still there. How to replicate the issue: 1) Unlock the page: https://www.whynot.media/unlock, then just to to https://www.whynot.media/su-di-noi/ till the GSAP carousel, then scroll somewhere. This is the code on that page, and below you can see the video that shows the problem. /***su di noi***/ function _funzioni_su_di_noi(){ if(body_class.contains("pagina-su-di-noi")){ function img_grid() { let griglia_ipads = document.querySelector('.contenitore-griglia-ipad'); if(griglia_ipads){ gsap.fromTo(griglia_ipads, { scale: 5, transformOrigin:"center", }, { transformOrigin:"center 60%", scale: .3, stagger: .5, scrollTrigger: { trigger: griglia_ipads, start: "top 110%", end: () => innerHeight * 6, scrub: true, } }); gsap.set(".contenuto-ipad:not(.centerBlock)", {autoAlpha: 1}) gsap.to(".contenuto-ipad:not(.centerBlock)", {duration: 0.1, autoAlpha: 1}, 0.001) // Images to make it look better, not related to the effect const size = Math.max(innerWidth, innerHeight); gsap.set('.contenuto-ipad', {backgroundImage: i => `url(//picsum.photos/${size}/${size}?random=${i})`}); const bigImg = new Image; bigImg.addEventListener("load", function () { gsap.to(".centerPiece .contenuto-ipad", {autoAlpha: 1, duration: 0.5}); }); bigImg.src = `//picsum.photos/${size}/${size}?random=50`; } } img_grid(); /*horiz scroll sections4*/ async function horiz_scroll_sections(){ let snapX,slideDelay=4,slideDuration=.3,slides=document.querySelectorAll(".slide"),prevButton=document.querySelector("#prevButton"),nextButton=document.querySelector("#nextButton"),progressWrap=gsap.utils.wrap(0,1),numSlides=slides.length;gsap.set(slides,{backgroundColor:"random([red, blue, limegreen, dodgerblue, orange, goldenrod, lime, black])",xPercent:a=>100*a});let wrap=gsap.utils.wrap(-100,100*(numSlides-1)),animation=gsap.timeline({repeat:-1});animation.to(slides,{xPercent:"-="+100*numSlides,duration:numSlides,ease:"none",modifiers:{xPercent:wrap}},0),animation.to(".slide span",{rotate:360,ease:"none",stagger:{amount:numSlides-1}},0),animation.pause(),setupDraggable();function setupDraggable(){function a(){f.kill(),this.update()}function b(a){f.kill();let b=snapX(gsap.getProperty(e,"x")+a*-g);f=gsap.to(e,{x:b,duration:slideDuration,onUpdate:c})} function c(){/*console.log(gsap.getProperty(e,"x")/-h,"wrapped",progressWrap(gsap.getProperty(e,"x")/-h)),*/animation.progress(progressWrap(gsap.getProperty(e,"x")/-h))}function d(){let a=gsap.getProperty(e,"x")/h||0;g=slides[0].offsetWidth,h=g*numSlides,snapX=snapDirectional(g),gsap.set(e,{x:a*h}),b(0),f.progress(1)}let e=document.createElement("div"),f=gsap.to({},{}),g=0,h=0;d();let i=new Draggable(e,{type:"x",trigger:".slides-container",inertia:!0,maxDuration:.75,minDuration:.1,minimumMovement:45,onPress:a,onDrag:c,onThrowUpdate:c,allowContextMenu:!0,allowNativeTouchScrolling:!0,snap:{x:a=>snapX(a,0>i.deltaX?-1:1)}});window.addEventListener("resize",d),document.querySelector("#prevButton").addEventListener("click",()=>b(-1)),document.querySelector("#nextButton").addEventListener("click",()=>b(1))}function snapDirectional(a){let b=gsap.utils.snap(a);return(c,d,e=1e-3)=>{let f=b(c);return!d||Math.abs(f-c)<e||0>f-c==0>d?f:b(0>d?c-a:c+a)}}; function dx_sx(){let e=document.querySelector(".hero-caption"),t=document.querySelector(".drag-carousel");e.addEventListener("touchstart",(function(n){let a=n.changedTouches[0].pageX;e.addEventListener("touchend",(function(e){let n=e.changedTouches[0].pageX;a<n?(t.classList.remove("mancino"),t.classList.add("destro")):(t.classList.add("mancino"),t.classList.remove("destro"))}),!1)}),!1)}dx_sx(); } horiz_scroll_sections(); }//su di noi } _funzioni_su_di_noi(); What can I do? Thanks
  7. hi guys! my problem is, that my lottie animations, which are combined with a scrolltrigger sometimes start to flick in safari. the flickering only appears above a certain viewport. as i said sometimes the flicking happens sometimes not. i already tried to just make the animation not fullscreen, but unfortunately it doesn't help at all. i also noticed, that the flickering is much worse if i visit the site on a ultrawide display. i also thought about just implementing the animations as videos, but there are like 6 animations on one page, so i didn't want to let the loading time explode. in the demo i haven't noticed any flickering so, if u want to see the full page: www.sterngasse.at
  8. I've been struggling with the issue for 3 days, rewriting, refactoring code few times. Please help me if possible, guys. I use ReactJS and GSAP to create different computed animations ( overlays over a video ). What happens is that when I seek to specific percentage completed, for example 0.19 out of 49s timeline total length, it does seek to the first 1s part of the animation timeline cycle, and doesn't show the animation at the stage expected based on the progress percentage. I couldn't upload project to codesandbox as 1) it is nda signed and 2) it says that it has exceeded the 500-module items limit; I'm really sorry for that. Could someone please help me? I can share the source code or give access to my github repository. Thanks in advance everyone! import gsap from 'gsap'; import RightTitleStyles from '../../../../styles/right-title.module.css'; import React from 'react'; interface RightTitleProps { range: Object; name: string; currentTime: number; isPreview: boolean; type: 'smaller' | 'bigger'; isVisible: boolean; style: any; subtitle: string; title: string; } const RightTitle = React.memo( ({ videoRef, setStyle, range, name, currentTime, isPreview, type, isVisible, style, title, subtitle, }: RightTitleProps) => { const titleRef = React.useRef(); const { current: tl } = React.useRef(gsap.timeline({ paused: true })); const [ rangeIntervals, setRangeIntervals ] = React.useState< Array< number > >( range.timeIntervals ); const connectTitleRef = ( el : HTMLElement ) => { if (titleRef.current || !el || !videoRef || isPreview ) { if ( isPreview || !el || rangeIntervals === range.timeIntervals ) { return; } else { tl.killAll(); // just clearing out some tweens for repeated recreation } } tl.progress(1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0])); titleRef.current = el; console.log( titleRef.current.id, videoRef, ); console.log('configuring...'); tl.fromTo(videoRef, { width: '100%' }, { duration: 1, width: '63%' }).to(videoRef, { duration: range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1, width: '63%' }).to(videoRef, { duration: 1, width: '100%' }); console.log( 'video configured', ); tl.fromTo( el, { x: name === 'Right Title' ? 150 : -150 }, { duration: 1, x: 0 }, ) .to(el, { x: 0, duration: range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1, }) .to(`#${ el.id }`, { duration: 1, x: name === 'Right Title' ? 150 : -150, }); console.log(range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1); }; // console.log( style, ); React.useEffect(() => { if (!titleRef.current || isPreview) return; console.log( 'styles applied to titleRef', titleRef.current._gsTransform ); console.log( 'these are tweens', tl.getChildren().map( child => child.vars.x || child.vars.width ) ); console.log( 'these are tweens', tl.getChildren().map( child => child.vars ) ); if (!(range.timeIntervals[0] <= currentTime && currentTime <= range.timeIntervals[1])) { console.log( 'current timing doesn`t fit the intervals' ); setStyle({}); tl.progress(0); return; } setStyle({ marginLeft: name === 'Left Title' ? 'auto' : 'unset', marginRight: name === 'Right Title' ? 'auto' : 'unset', }); tl.progress(1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0])); console.log(range.timeIntervals[1] - range.timeIntervals[0] - 1 - 1) console.log( currentTime, range.timeIntervals, 1 - (range.timeIntervals[1] - currentTime) / (range.timeIntervals[1] - range.timeIntervals[0]), ); }, [range.timeIntervals, currentTime]); const show = isVisible; if ( isPreview ) { return <div style={{ top: type === 'smaller' && 0, height: type === 'smaller' && '100%', ...style }} className={RightTitleStyles.aligningWrapper} > <div style={{ transform: isPreview && 'scale(0.55)' }}> <h1> {title} </h1> <p> {subtitle} </p>{' '} </div> </div> } return ( <div ref={ connectTitleRef } id={`${isPreview ? 'previewMode' : 'notPreviewMode'}3${range.color.slice(1)}`} style={{ visibility : !( currentTime + 1 >= range.timeIntervals[0] && currentTime - 1 <= range.timeIntervals[1] ) ? 'hidden' : 'visible', top: type === 'smaller' && 0, height: type === 'smaller' && '100%', ...style }} className={RightTitleStyles.aligningWrapper} > <div style={{ transform: isPreview && 'scale(0.55)' }}> <h1> {title} </h1> <p> {subtitle} </p>{' '} </div> </div> ); } ); export default RightTitle; Title.tsx animation.tsx
  9. Hi everyone, The issue here seems to be with the shifting of the background images on slide in / out. In the functions slideIn and slideOut I've commented out the lines of code that shift the background images. With this code removed everything works fine on all browsers. Un-commenting the code adds the image shifting and on Chrome and Firefox, everything works fine with the shifting added. On Safari however, it appears to kill the other tweens that scale the SVG clipping path and do the SplitText animation. Have a look and see what you think. I'm assuming I've made a mistake but then I'd also assume I'd have an issue in other browsers. (Feel free to critique my code as well )
  10. Scrolltrigger does not work when trying to do a scrub animation with an element that is positioned transform:translateY(-50%) . In the attached example -49% and -51% work as expected, but -50% stays in the same position while scrolltrigger appends translate3d(0px, 0px, 0px) to the element. <div class="wrap"> <div class="box1" style="transform: translate3d(0px, -36.4235px, 0px);"></div> <div class="box2" style="transform: translate(0%, -50%) translate3d(0px, 0px, 0px);">broken</div> <div class="box3" style="transform: translate3d(0px, -37.7385px, 0px);"></div> </div>
  11. hi, I have a problem on ios devices with scrollTrigger, when I scroll, scroll suddenly skips or jumps, I have no idea why this happens because the code I wrote is only this. There's a video at the bottom that you can see what I mean. Thank you for your attention:) gsap.timeline({ scrollTrigger:{ trigger:'#s0', scrub:true, start:'top top', end: 'bottom -220%', pin: '#s0', } }) // .to('#photo1',{maskImage: 'linear-gradient(rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 1) 0%,rgba(0, 0, 0, 0) 50%)'}) .to('#photo1', { opacity: 0 }); idk.mov
  12. Good Day All! I am writing because I have recently ran into a problem with the Club Greensock plugins in a project. Basically the story is as follows: I have a React project that is running on Next.js and is deployed on Vercel. Their pipeline is integrated to GitHub and all you have to do is push changes to your remote repo and it is built and deployed automatically by Vercel. As a side note, the flow is quite amazing and it is worth checking out... So I have recently added the Club Greensock plugins to the project and they are working like magic on the local server, the plugins really are amazing! However, whenever I deploy I am getting the following error since I am git-ignoring the tarball as I have read a couple of comments by the GSAP team asking not to upload the files to GitHub: error "./gsap-bonus.tgz": Tarball is not in network and can not be located in cache (["/vercel/3c5442f4/gsap-bonus.tgz","/vercel/.cache/yarn/v6/npm-gsap-3.4.1-b86fc24265bbb3738ad1efb8f7bd4b2aa4a38a20/node_modules/gsap/.yarn-tarball.tgz"]) I have read some posts in the forums but the suggestions and fixes don't seem to apply to this particular case. I am thinking that a quick fix could be if by any chance the plugins are deployed as a private NPM package. I really don't have any other ideas at the moment... Please, please, please let me know if anyone else has run into a similar issue and what solutions have you devised/come across!
  13. Just trying 2 different easy approaches to get this typewriter works like a charm! My issue is to sync both animations of the #text element and the chars and I do believe it is really simple to do! I am looking for an easy approach to take down this latency this animation is what i need to edit: // need to sync this block with the above animation gsap.from('#text', {width: 2, duration: 2, ease: SteppedEase.config(20) }) my target is to code this without the use of any other JS Libs like jquery
  14. https://greensock.com/docs/v2/Easing when you click and change value, it not live update? Tested on Vivaldi and Firefox. Edit: try elastic,Back
  15. Has anyone encountered the issue, today I was work on a new project and I was using new updated GSAP and MorphSVGPlugin for this one. I had to do some motion along a path. So first this I wan creating variables like below: var motionPath_1 = MorphSVGPlugin.pathDataToBezier("#motionPath-1", {align:"#connecting-dot"}); But this is throwing an error as below: Uncaught TypeError: MorphSVGPlugin.pathDataToBezier is not a function This is the same thing I've been using and on the new update this has no change as I can think of. When using old GSAP and MorphSVGPlugin it is work fine. Has anyone encountered this? Does anyone know what is the issue?
  16. Hey is this a bug or a misunderstood feature. I have issue with overwrite. In this demo if we make {overwrite:true} The timeLineId 'action' should override the timeLineId 'pre' only at 3 seconde no ? And if we make {overwrite:false} The timeLine 'pre' will continue in background and make big spike after 'action'. https://codepen.io/djmisterjon/pen/VwwJeJQ would it be possible technically to make override only act when the child timeLine execute has 3 seconds? thanks for help or suggest.
  17. hi guys, the page where i love (copy paste) easing code was broken. the v2 version only. the v3 work but i alway need edit the ease string code. It possible to get back working v2 editor when you will have time plz ? thanks https://greensock.com/docs/v2/Easing
  18. Hiya all! i recently tried updating my site to using GSAP v3. I have a couple transitions that relied on GSAP tweening object values, it all worked perfectly, but now GSAP is updating the object with incorrect values and ending on the wrong final value. Check out my codepen for a bare minimum reproduction of the issue. The expected end state is 10000000 but GSAP is ending the tween with 121575.2192. In some cases i've seen it end with a negative number. It seems to work perfectly fine with smaller numbers under ~100000 Anyone aware of why this is happening or a way around this issue? Thank you!
  19. hey nice bug It convert number to string! https://codepen.io/djmisterjon/pen/YzzRRWL
  20. hum i think i get another weird bug here with my current timeLine setup in my project. All my event seem broken. I think values are not compute on .set(). Here the small context of userCase. You should see 2 console.log 1:'call:0 succeed' 2:' a:10, b:10, c:0' we don't get the log 'call:0 succeed', if the timeLine times are 0. if we add example time = 1, we get 'call:0 succeed', but set values seem not hacked, and leaved to `a:0, b:0, c:0` codepen Can you confirm, or something change in the core ?
  21. jonForum

    gsap3 crash

    hi guys. trying convert my current app with gsap3 Little crash here ? i can't track why? any ideas about what can do this ? Don't know what hardness should be , but it look undefined. Removed from projets:" ---TweenMax.js ---EasePack.js ---TimelineLite.js Added gsap3 gsap.js EasePack.js
  22. Good day, Can someone help me solving the issue? Have been looking for multiple solution and i don't want to end up using javascript safari hacks. My sample pen works in other browsers but safari. Many thanks in advance.
  23. I am dealing with a bug that seems be present only on Microsoft Edge < 15. Someone here know how resolve it or what is causing this? Chrome, Safari, Firefox, IE 11. Edge < 15 Here is the code for the animations. function scaleAndShrinkAnimation($element, maxWidthPercentage, durationSeconds) { var widthHalf = maxWidthPercentage / 2; return TweenMax.to($element, durationSeconds, { width: maxWidthPercentage + '%', top: '-=' + widthHalf + '%', left: '-=' + widthHalf + '%', repeat: 1, yoyo: true }); }
  24. Hi, I have created a minimalistic code pen to replicate the scenario CodePen. What I want to achieve is: Child (the cyan rows) should also be dragged along with the parent (greyed area) Child (the cyan rows) should be independently draggable within that grey area This works fine in Microsoft Edge and FireFox desktop browsers but doesn't work in Google Chrome
  25. Hey guys, long time no see I'm getting back into GSAP and came across something that I think is a bug. I have a very basic container with substantial vertical padding that I'm trying to add `scrollTop` animation that uses GSAP's `throwProps` functionality. However, it seems to be breaking the scroll functionality, presumably due to the substantial vertical padding that I have. Note that you need to click/drag or touch/drag to have this behavior come into effect. Am I doing something wrong or is this a bug? P.S. How do I do inline code formatting in this editor?