Jump to content
GreenSock

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

Carl last won the day on April 4 2019

Carl had the most liked content!

Carl

Moderators
  • Posts

    9,152
  • Joined

  • Last visited

  • Days Won

    532

Posts posted by Carl

  1. If you're looking for a plugin that will automate the building of a slider, that isn't a tool that GreenSock provides. You might want to Google jquery slider or jquery carousel for something like that.

     

    GreenSock's tools are more for developers that want to write their own code and tap into the animation capabilities of the engine. If you want to invest some time into learning GSAP, I think you'll find the basics will come quickly. We'll be happy to answer any questions you have along the way.

    • Like 2
  2. Hi and welcome to the GreenSock forums,

     

    It appears that site was built using the GreenSock Animation Platform (GSAP).

    The 3D elements are most likely being rendered with Three.js.

     

    Quite a bit of custom programming was most likely involved. It's tough to help without knowing how far you have gotten on your own or what your experience level is. In order to use GSAP you need a pretty solid foundation with HTML and CSS and will need to know how to write your own JavaScript code.

     

    Are you looking for a plugin that creates a slider like that or are you comfortable writing your own code?

    Have you read our Getting Started article: https://greensock.com/get-started-js and tried to create basic animations with GSAP?

     

     

     

     

    • Like 2
  3. The one circled is not like the others. 

    TweenMax.stagger To() does not use a position parameter. 

     

    Id suggest using the timeline stagger methods instead of using add() with a TweenMax.staggerTo(). Much easier to to read and type. 

     

     

     

     

    DD3DEB07-17D1-423D-A373-53BBEC08CFFE.jpeg

    • Like 4
  4. the only thing I would suggest to troubleshoot would be change the 250 to something really big like 10000 or really small like 10 to see if the throttling is related to the problem

     

     const onMouseWheelThrottled = throttle(onMouseWheel, 250, {
          leading: true,
      });

    • Like 1
  5. The blue tween does not move when you later put other tweens before it. it starts at 2 seconds because when it was added to the timeline its start time was based on the duration of the previous tween, which was 2 seconds.

     

    the visualizer loops through the child tweens in order of their startTime. 

    the orange tween is represented by the middle bar because its start time is 0.2

    the blue tween is represented by the BOTTOM green bar because its start time is 2 seconds and it is the last child in the timeline.

     

     

     

    • Like 1
    • Thanks 1
  6. Quote

     

    The demo will allow me to test all context values for timeLine and also see my misunderstand of the under-hood behavior.


     

     

    I really don't think so, as it is not meant as a debugging tool. The visualizer is from 2014 and uses a lot of old code.  

     

    I only found 1 codepen, which again is totally old and experimental, so we really can't help you with it. But here it is:

     

     

    See the Pen 50c3998d322a4d9ef779a635b1df0d35?editors=1010 by GreenSock (@GreenSock) on CodePen

    • Like 2
  7. Hi, I just checked and the demos on the position parameter page are working as intended and interactive.

    You press the play button and drag the playhead (red triangle).

     

    Is there a particular browser that you are using that has errors?

     

    Sorry if you thought you could just drop your own code in there and have a visualization of your timeline built for you. That's not how they work. They were built just to accommodate a very narrow set of super basic use cases. However, these basic use cases can be combined and tweaked to make extremely precise and intricate sequences. Once you master these basics there should really be no limit on what you can do.

     

    ---

     

    I'm not really sure what your question or issue is. The best thing to do is to isolate the problem as best as possible, which begins with removing everything that isn't related to the problem. Unfortunately, none of us really have the time to read through hundreds of lines of code and try to figure out what might be wrong.

     

    90% of the time just going through the steps of reducing the code reveals the problem.

     

     

     

    • Like 1
  8. Hi and welcome to the GreenSock forums,

     

    Thanks for the demo. Definitely helpful, however a few things:

     

    1. Please don't paste GSAP source code in the JS panel. Especially for the bonus plugins. We provide CodePen-safe urls for all the bonus plugins here: https://greensock.com/try-plugins. For loading GSAP and some CodePen basics see: 
    2. Try to reduce your demo as much as possible. For instance we don't need the nav or hundreds of lines of css. If there is a problem with repeating an animation we only need the timeline to have 2 or 3 items. It just makes it easier to spot the problem and less time to watch.

    I reduced your demo a bit and focused only on the text part as that seemed to have the most obvious issue.

    I think the biggest problem was that your page started out with e-business in the DOM so when the timeline repeated you always saw that text fully visible before it went away and then animated in. 

     

    I simplified the demo a bit so hopefully its clear to see what is happening. 

     

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

     

    notable changes:

     

    • removed text that will be animated from the DOM.
    • I gave the master timeline an initial delay so that on page load you have some time to read the sentence before the animation starts
    • I took the delay out of your config object for defaultText styles and used a position parameter instead on the animation of the typing text effect. FWIW i strongly recommend using the position-parameter instead of delays in timelines.
    • i added a 2-second dummy tween to give people some time to read the text before it goes away

    Hopefully this is enough to get you in the right direction and make whatever changes you need to the images.

     

    FWIW I don't think having separate functions to build the images animation and text animation is the best as if you make considerable timing changes to the text you will have to do the same thing in the images function. Probably better to just build all the animations in 1 loop.

     

     

     

    • Like 3
  9. I'm sorry, right to left what? The slider clearly moves from right to left when you press the right arrow.

     

    Please understand that there are plenty of people here that are more than happy to help you learn the GSAP API.

    However, taking someone else's fully functional slider and adding custom features that you need for your project isn't really something we have the resources to provide. 

     

    • Like 4
  10. No need for a new thread, but thanks for asking.

     

    You can't nest plugin values inside each other, so tweening attr plugin values inside the bezier plugin isn't going to work. However with SVG circles you can animate their css transforms so it is totally possible animate their x and y using bezier plugin

     

    See the Pen GLZNZB?editors=1010 by GreenSock (@GreenSock) on CodePen

    • Like 3
  11. Hi and welcome to the GreenSock forums,

     

    Thanks for the demo.

    In the future, please try to simplify as much as possible. For instance we don't need paths with tons of points, or many paths. The simpler the data structure the better. That said there are 2 issues that jump out:

     

    1: Your values for cx and cy seem to be undefined in your notWorking() function as shown by a simple log. Please add the console logs below to see the issue:

     

    function notWorking() {
      for (i=0; i < ids.length; i++) {
      // selecting the circle 
        var p = document.getElementById(ids[i])
        
       
        
        console.log("this is a problem" + paths[ids[i]].cx)
        console.log("this is a problem " + paths[ids[i]].cy)
        var tl = new TimelineMax()
      
        tl.to(p, 0.24, {
          cx: paths[ids[i]].cx,
          cy: paths[ids[i]].cy,
          ease: Linear.easeNone      
        })
      }
      
    }

     

     

    2: svg circles do not have cx and cy properties or css values, they have cx and cy attributes. To animate those values with GSAP you need the AttrPlugin. Here is a basic example of how it works:

     

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

     

    I think once you get proper values and pass them into the attr plugin you'll be in a better spot. If you still have problems, please try to reduce the amount of data a bit so that its easier to help. thanks.

     

    • Like 3
  12. Hi and welcome to the GreenSock forums.

     

    It sounds like you aren't loading CSSPlugin (included in TweenMax).

    If you want to tween css transforms like x,y,skewY, skewX etc, you need to have CSSPlugin present because images do not have x and y properties that can be tweened.

     

    https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/plugins/CSSPlugin.min.js

     

    Check out the Getting Started article: https://greensock.com/get-started-js or docs: https://greensock.com/docs/Plugins/CSSPlugin for more info

     

    • Like 3
  13. Hi and welcome to the GreenSock forums,

     

    Unfortunately we really have to keep our support focused on the GSAP API. Currently there isn't anything in the API related to scrolling.

     

    ScrollMagic is really your best bet (unless you want to write your own custom code). From what you are describing I'm confident ScrollMagic could handle that with ease so I'd suggest posting a question on their github isssues.

     

    Also, it might make sense to go through a ScrollMagic course so that you can understand it first before trying to make it do something very specific.

    Petr Tichy has a free course: https://ihatetomatoes.net/get-scrollmagic-101/?ref=5 and premium one. 

     

    The demo you posted looks almost identical to the effect in your gif, so I'm not exactly sure what you need that is different.

     

    If you want to use GSAP for the animation, I'd suggest building a demo of your scene with the animation that you want and then try to control it with scrolling.

    OSUBlake explains how to do that without ScrollMagic here: https://greensock.com/forums/topic/18343-timelinemax-scrollmagic-lottie-web-bodymoving-is-it-possible-is-it-necessary/?do=findComment&amp;comment=84897

     

     

    • Like 3
  14. The issue is that you are telling the function to execute immediately when you add the () at the end: 

     

    onComplete: this.onSlideChangeEnd(slideIndex)
     

    But you need to just pass a reference to the function and then pass the parameters separately in an array

     

    onComplete: this.onSlideChangeEnd,
    onCompleteParams: [slideIndex]

     

     

    • Like 2
    • Thanks 1
  15. Hi,

     

    I don't have any experience with WebFlow, but I assume it would allow you to add any external JavaScript files of your choosing. 

    You should be able to add TweenMax.min.js and CustomEase.min.js just as you would any other file.

     

    A quick search of the WebFlow forum shows: https://forum.webflow.com/t/using-external-scripts/31220

     

    I'm guessing you'll get more detailed help from the WebFlow team. I'm confident it won't be that hard as you would use GSAP just as you would any other third party js library.

    • Like 2
×