Jump to content
Search Community

DjKarimi

Members

  • Posts

    13

  • Joined

  • Last visited

 Content Type 

Posts posted by DjKarimi

    Inspiring HTML5 Banner Examples with GSAP

    in Banner Animation

    Convert anime.js

    in GSAP

    Posted

    Hi Mr "GreenSock" very Thank you so much.

    I want exactly this code function "multiTo" .

    But we need to code this development function and more possibilities and more options.

     

    Thank you .☺️

     

    Convert anime.js

    in GSAP

    Posted

    37 minutes ago, mikel said:

    Hi @DjKarimi,

     

    There are 12 lines of code, and it's effortless and fast. + the libary.

     

    You can also do it with the GreenSock AttrPlugin - for example:

     

     

    See the Pen MaabXe by GreenSock (@GreenSock) on CodePen

     

    Does this help?

    Mikel

     

    No, I want Mr. admin gsap to create a new framework for "anime.js".

    Animating SVG Polygon Points using attrPlugin

    in GSAP

    Posted

    On 9/9/2016 at 12:17 PM, GreenSock said:

    I got curious about this and enjoyed the challenge of making it into a single function that'll handle any number of points for you, so you can just feed in the string you want, the stagger, duration, etc. and it'll automate everything and spit back a TimelineLite instance containing all the animation :)

     

    Here's a forked version of Carl's: 

    See the Pen fbb9dd44bf1c98a9842a6c05d6c1be2b?editors=0010 by GreenSock (@GreenSock) on CodePen

    
//this one function call does it all:
staggerPoints("#hi", 2, {points:"100,-50 400,0 600,100"}, 0.5);

//the work is done in this one function that spits back a TimelineLite.
function staggerPoints(selector, duration, vars, stagger, onCompleteAll) {
  var numbersExp = /(?-)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig,
      element = document.querySelector(selector),
      startPoints = element.getAttribute("points").match(numbersExp),
      endPoints = vars.points.match(numbersExp),
      applyPoints = function() {
        element.setAttribute("points", startPoints.join(","));
      },
      copy = function(obj) {
        var o = {}, p;
        for (p in obj) {
          if (p !== "points") {
            o[p] = obj[p];
          }
        }
        return o;
      },
      tl = new TimelineLite({onUpdate:applyPoints, onComplete:onCompleteAll}),
      l = startPoints.length,
      obj, i;
  if (l !== endPoints.length) {
    console.log("Error: point quantities don't match");
  }
  for (i = 0; i < l; i+=2) {
    obj = copy(vars);
    obj[i] = parseFloat(endPoints[i]); //note: we need to make sure the values are converted from strings to numbers.
    obj[i+1] = parseFloat(endPoints[i+1]);
    startPoints[i] = parseFloat(startPoints[i]);
    startPoints[i+1] = parseFloat(startPoints[i+1]);
    tl.to(startPoints, duration, obj, stagger * i);
  }
  return tl;
}

    Play around with it and let us know if it works okay for you. 

     

    This is many line code .

    I want the code class to look like "anime.js"

    pls answer me :

    ?????

     

     

    Convert anime.js

    in GSAP

    Posted

    1 hour ago, mikel said:

    hi @kkarimi91@yahoo.com;

     

    do you want such an effect:

     

    See the Pen eKQRKM by mikeK (@mikeK) on CodePen

    Happy masking and tweening ... Mikel

     

    Hi thank you for answer me.

     

    But I did not approve.
    I know the programming code.
    But this "anime.js" class is quick and easy.
    For example, the :
     

    var morphing = anime({
      targets: '#morphing .polymorph',
      points: [
        { value: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369' },
        { value: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' },
        { value: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' },
        { value: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' }
      ],
      easing: 'easeOutQuad',
      duration: 2000,
      loop: true
    });

     

    There are 12 lines of code, and it's effortless and fast.
    I want the GSAP admin to create a new class that creates an animation like "anime.js".
    Because this code function is so beautiful, it's easy, it's great.

    If I type "gsap" like this "anime.js", I might have 100 lines of code.

     

    I  am gsap fan.
    I like gsap .
    I love gsap.

    And a person insulted to "GSAP".
    And that person is rival.


    ????

     

    https://github.com/juliangarnier/anime/issues/231

     

    TweenMax.min.js:17 Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': No function was found that matched the signature provided.

    in GSAP

    Posted

    On 4/10/2017 at 8:39 PM, Jonathan said:

    Hello kkarimi91

     

    It will be hard to debug or see whats going on just by that code snippet alone.

    • Are you loading TweenMax.min.js before other scripts?
    • Are you also using TweenLite and not loading the GSAP ScrollToPlugin file?
    • What order are you loading TweenMax in? make sure your not calling it before you load and call TweenMax.min.js

    To better help you, can you please provide a codpen demo example so we can see your code in context. And see how and in what order you might be loading your code?

     

     

     

    Thanks! :)

     

    Hi thank you , Must file load ''ScrollToPlugin" in file js.

    • Like 1

    TweenMax.min.js:17 Uncaught TypeError: Failed to execute 'scrollTo' on 'Window': No function was found that matched the signature provided.

    in GSAP

    Posted

    Hi mr admin

    i run script this error :
     

    $.fn.setSmoothPageScroll = function (options) {
        var ops = { time: 0.8, distance: 190 }, t = $(this), g = 'mousewheel DOMMouseScroll MozMousePixelScroll';
        ops = $.extend({}, ops, options || {});
     
        t.unbind(g).on(g, function (e) {
            var elem, v = $(this);
            if (e.srcElement) elem = $(e.srcElement);
            else if (e.target) elem = $(e.target);
            if (elem) {
                var t = $(elem).getInputType();
                if (t == 'select' || t == 'option') return;
            }
     
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
     
            var delta = e.wheelDelta || e.detail || e.originalEvent.wheelDelta || e.originalEvent.detail * -1;
            if (delta < 0) delta = -1; else delta = 1;
            var scrollTop = v.scrollTop(), finalScroll = scrollTop - parseInt(delta * ops.distance);
            TweenMax.to(v, ops.time, { scrollTo: { y: finalScroll, autoKill: true }, ease: Back.easeOut, autoKill: true, overwrite: 5 });
        });
     
        return this;
    };
     
    :(

    Inspiring HTML5 Banner Examples with GSAP

    in Banner Animation

    Posted

    Oh, sure, that's entirely possible to do but I don't personally have time to do it all for you. Sorry. Way too much on my plate right now :) Maybe someone else wants to tackle that. Typically we try to keep these forums focused on GSAP-specific questions (not so much "would you build this for me?" type of things). 

     

    Happy tweening!

    Ok , very thank you .

    :) 

    I'm try my code make from gsap animation icon 'LIKE'.

    Inspiring HTML5 Banner Examples with GSAP

    in Banner Animation

    Posted

    Hi Mr Admin .
    I want Animation Icon mojs :|  :| :

     

    https://tympanus.net/Development/Animocons/

     

    and cool power  :shock:  :shock:  :shock:  :shock:  :

     

    http://mojs.io/tutorials/easing/path-easing/

     

    See the Pen c7b99f1a216498818cbb9f0c881fc542 by sol0mka (@sol0mka) on CodePen

     

    ------------------

     

    See the Pen 95e3300c59686dc1d534d2b38c208ecc by sol0mka (@sol0mka) on CodePen

     

    -------------------------

     

    See the Pen OyzBXR by sol0mka (@sol0mka) on CodePen

    scrolling with tweenmax not work in iframe

    in GSAP

    Posted

    this sample download and document form work :

    http://blog.bassta.bg/2013/05/smooth-page-scrolling-with-tweenmax

     

     

    but but but iframe not work scroll :(
     
    <iframe id="ifrmView" border="0" class="brNon wFull" scrolling="yes"></iframe>
     
    And Source :
     
    $('#lstExplorer li').live('click', function (e) {
        var URL=$this.data("path");
        var Type=$this.data("type");
        $("#ifrmView").attr("src","PanelView.php?URL="+URL+"&Type=" + Type).load(function(){
           this.contentWindow.setLoadInit();
           //setScrollAnimation($(this.contentWindow));
        });
    });
     
    in content iframe :
     
    <script src="JavaScript/GSAP/TweenMax.min.js" type="text/javascript"></script>
    <script src="JavaScript/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
    function setLoadInit() {
    setScrollAnimation($(window));
    }
    </script>
     
    <div> ....

     

     

×
×
  • Create New...