Jump to content
Search Community

Kyeno

Members
  • Posts

    2
  • Joined

  • Last visited

Posts posted by Kyeno

  1. Hey, thanks a lot! And I totally understand what you're doing there - not blaming whatsoever, just pointed out my *strange* use case and the fact I couldn't find any real solution around. I don't know GSAP Engine good enough just yet to be able to provide such plugins as you did. :)
    Thank you again! Going back to GSAPing!

    • Like 1
  2. Hey!

    I recently switched from Tween.JS to GSAP, and I'm trying to tween a number with potentially large number of decimal places. I wrote a small library that finds-on-screen and auto-tweens those numbers, so I do not have a *predefined* number of decimals - but as they're cryptocurrency prices, those can be 4, 6, 8 or 9 - usually.

    I noticed that both TweenMax and TweenLite do only 4 decimals, which is quite weird. Looking around the web (and this forum) I cannot find a solution/parameter/switch how to alter this behavior. Any advice?

     

    import gsap from 'gsap';
    import { TweenLite, Expo } from 'gsap/all';
    gsap.registerPlugin(Expo);
    
    export default class TweenEmAll {
      
    	// ..cut
        objTween = undefined;
        objTweenProgress = { value: 0.000001 }; // experiment with pre-defined 6 decimals
    
    	// ..cut
        tween() {
    
          	// ..cut
          
            // launch new tween
            this.objTween = TweenLite.to(this.objTweenProgress, this.duration, {
    
                value: this.target,
                ease: Expo.easeOut,
                //decimals: 6,		// experiment
                //autoRound: false,	// experiment
                onUpdate: this.onTweenUpdate.bind(this)
            });
        }
        onTweenUpdate() {
    
            // reconstruct value nicely
            let value = this.objTweenProgress.value.toFixed(6);	// experiment
    
            // update appropriate element
            if(this.isInput) this.elmContainer.val(value);
            else this.elmContainer.html(value);
        }
    }

     

×
×
  • Create New...