Jump to content

Carl last won the day on April 4

Carl had the most liked content!

Carl

Moderators
  • Content Count

    9,148
  • Joined

  • Last visited

  • Days Won

    532

Everything posted by Carl

  1. sheesh, you had to lure me out of the shadows this soon? Love it. Congrats on turning 3,000!
  2. Hi @info@wolfram-brandhoff.com welcome to the GreenSock forums. When you using Animate CC you can only animate properties that exist on EaselJS DisplayObjects: http://www.createjs.com/docs/easeljs/classes/DisplayObject.html Animate CC's html5 canvas output does not support 3D
  3. 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.
  4. 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?
  5. 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.
  6. 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, });
  7. hey @Visual-Q you have to click the very unintuitive 980x300 link.
  8. I found that removing the H2 Test from the dom (on the parent page) using developer tools made it go away. Very strange. I have no idea why, but I really doubt this is a GSAP thing. If you animate different properties does the same thing happen?
  9. 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.
  10. 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: https://codepen.io/GreenSock/pen/50c3998d322a4d9ef779a635b1df0d35?editors=1010
  11. 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.
  12. hi @sashaikevich the wiggle-bounce demo is here. take a look at the the finalSequence() method https://codepen.io/GreenSock/pen/bBXEvR?editors=0010
  13. Carl

    New Safari Bug

    Please see: https://github.com/greensock/GreenSock-JS/issues/306
  14. Carl

    animation loop jump

    Hi and welcome to the GreenSock forums, Thanks for the demo. Definitely helpful, however a few things: 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: 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. https://codepen.io/GreenSock/pen/jRVqYQ?editors=0010 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.
  15. Carl

    Slider GSAP for rtl

    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.
  16. 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 https://codepen.io/GreenSock/pen/GLZNZB?editors=1010
  17. 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: https://codepen.io/GreenSock/pen/qwZOJz 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.
  18. That's a pretty cool effect. Not sure how they do it. I tried inspecting the page but it wasn't immediately apparent. Could probably take some time to dig through it all.
  19. 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
  20. Hi and welcome to the GreenSock forums, Very tough to diagnose without a reduced demo. However, I'm not really sure how this question relates to GSAP. Seems something is making controller undefined and that isn't obvious to me. Perhaps if you create a super simple demo as explained here: it might be easier to help.
  21. 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
  22. You could set the progress() to the inverse of the current reversed() state which will be either true/false which can be read as 1/0 However, I feel that an easy to read condition is better than this type of cryptic code stew.
  23. 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]
  24. Yes, that seems like a valid solution, or try to host that file on a server that you have ftp access to.
  25. 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.