Carl last won the day on January 17

Carl had the most liked content!

Carl

Administrators
  • Content count

    8,384
  • Joined

  • Last visited

  • Days Won

    503

Everything posted by Carl

  1. cubic spline and animation along a path

    and also go through a few pages of @OSUblake's public CodePen demos: https://codepen.io/osublake/pens/public/ Lots of spliney stuff in there.
  2. can't animate image height to toggle it

    It would be great if in cases like this you could reduce your demo so that it only includes the code necessary to replicate the problem. No need for loops and multiple timelines. It just adds an additional layer of complexity. Being that every time I ran your demo it gave different results of showing different images in different places my guess is that your javascript code is running before your images are loaded and thus the engine has nothing to take a height measurement from. Try adding height attribute to your images or waiting until all the images are loaded.
  3. Morph SVG Animation Jitter

    Glad you found a fix. Not really sure what you mean by specifying more states, I'm guessing you could draw those states and morph to each one sort of like we do with the hippo demo in the docs: I noticed also you are using a SteppedEase config value of 1.8, you should use integers.
  4. Interesting project. Very cool. I didn't see the flickering. I'm sure it exists as you say, but its very tough to trouble shoot these things. My best guess is just a weird browser rendering quirk. I really don't think this is something related to GSAP or that can be fixed with GSAP. If you can reproduce it on a smaller scale in CodePen or something perhaps we can take a deeper look. Can't really dive into your production site that well.
  5. How to add this CDN Link into HTML

    A pen is really not supposed to be a complete website. Notice there are separate panels for HTML, CSS, and JavaScript so you can keep your code nicely separated. Pens are usually for small demos. Perhaps you should look into CodePen projects for more advanced features. I would strongly suggest you look at some other pens and read the CodePen faq and support documents. To embed a pen you just click on the "emebed" button at the bottom of the pen and it will give you various options for exporting the html. I slapped that pen at that top of yours just to show you. I really don't think this is a good idea. Pen in a Pen We have to keep our support focused on the GSAP API. Let us know if you have questions regarding animation. Please consult CodePen support for other CodePen questions. Thanks
  6. Help with loop Tween getElementID

    Thanks for the demo. It seems you were passing bad strings into document.getElementById() You were passing in something like "#bird" as the SectionC param in sceneHelper(sectionA, sectionB, sectionC). when you called the function sceneHelper('#section1', '#owl', '#bird'); Inside of sceneHelper() you were doing var x = document.getElementById(sectionC + i).style.fill and the sectionC + i expression was evaluating as "#bird1" or "#bird2" etc. You can't pass the # into document.getElementById(), you just want to use "bird", "horse", "lion" I've probably made the same mistake a hundred times. Without changing a bunch of code just use: var x = document.querySelector(sectionC + i).style.fill
  7. Beginner Question: Planning an Animation

    Glad you got it working. Yeah, SVG sounds like a good fit for this. Not really sure what you need for the colors, but if you want a random color on each mouseover you could randomly pull from an Array like:
  8. How to add this CDN Link into HTML

    Hi and welcome to the GreenSock forums, A CDN is a content delivery network: https://www.cloudflare.com/learning/cdn/what-is-a-cdn/ CDN's provide quick access to commonly used JavaScript files for people all over the world. All of the public GSAP files are hosted on cloudfare's cdn: https://cdnjs.com/libraries/gsap Although you can load any file individually, most people just load TweenMax which includes the most commonly used components. The CDN link for TweenMax is <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> You just put that in your html file before any scripts you write that need any GSAP tools in order to run like //load TweenMax for cloudfare CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> //write your own code that uses GSAP <script> TweenLite.to("#myDiv", 1, {x:100}); </script> One of the best ways for beginners to learn is to look at some basic demos. We have a bunch on CodePen https://codepen.io/collection/ifybJ/ Click on any of those demos and you will see all the html, css and javascript used to make it run. In the bottom of every Pen is the option to export a zip. You will then get a set of local files you can run. Feel free to download and investigate as many as you like. A typical html file will look like: <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Basic Tween</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="demo"> <div id="logo"></div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script> <!-- your custom javascript file --> <script src="js/index.js"></script> </body> </html> As a side note, I would strongly recommend learning the basics of GSAP before getting too deep into ScrollMagic. Let us know if you have any more questions.
  9. SVG inversing

    Thanks a lot for doing that mikel! So helpful. @bparticle I'm in the same boat as Mikel, not really sure what the desired results are. It might help if you could provide a set of keyframes (static) for what the beginning, middle and end state should look like. I'm kind of assuming you want something that looks like an A to morph into a rectangle or square. The hollow part of the A is always going to give you trouble. I did a quick experiment by drawing something that isn't an A and putting a triangle over it For the the thing that looks like a sqaure (#end) I drew a square using the Pen tool starting in the top center and when I was done I added 4 additional points along the bottom so that the bottom points in the A thing had matching nearby points to move to. I also added an additional point in the top center of the A thing so that it would split the A in half and that point would go to the top-center of where I started drawing my box thing. The end result is this. The moral of the story. You may need to finesse things a bit. The morphing algorithm does what it finds to be most efficient. It can't always be what you want, especially with complex shapes with non-matching numbers of points. Note: I left the little triangle white so you can see it as an individual element. In real life it would match your background color.
  10. SVG inversing

    Thanks for the demo. I reduced down so I could just see what #step1 looked like(added stroke and fill). The findShapeIndex tool requires a closed path: https://greensock.com/docs/Plugins/MorphSVGPlugin it appears #step1 is not closed and you have a path / stroke kind of floating around on its own in the demo below #step1 has a green fill. For the best results use a closed path. Also it looked like you edited previous posts and changed the demo while I was trying to help. Please just reply to the thread with updated (new) demos. Your updated demos look very different then the one I initially forked. If you have further questions please reply and clarify. thanks.
  11. infinite cube carousel

    LoveStoned, I think you can just change the order things appear in the html <div id="container"> <div class="slide">1</div> <div class="slide">6</div> <div class="slide">5</div> <div class="slide">4</div> <div class="slide">3</div> <div class="slide">2</div> </div> <div class="controls"> <div id="next">Prev</div> <div id="prev">Next</div> </div> <span id="info"></div> You can then update your ID's on your buttons ("next" and "prev") and tweak the js as needed so it makes sense.
  12. scroll hijack / smooth scroll

    Sorry, we don't offer anything like that at the moment. I don't think creating a similar tool is anything we will be doing any time soon as we are already deep in other new features and upgrades. However, we totally appreciate the suggestion. Its always possible its something we can do with more demand and as time allows.
  13. Complex SVGMorph with loop called from Tween Function

    Hi Phoenixwebb Welcome to the GreenSock forums. Thanks for posting your solution. Very cool. Sorry we couldn't help you sooner. Not many around on Sunday nights. Happy tweening and good luck on the rest of your project!
  14. SVG inversing

    If you Fork that pen, you then have a pen that loads all the premium plugins. You would just need to add your own code at the point. Another option is you can create a new Pen from scratch and load the tools you need with the urls of the scripts you need. Here is a pen you can fork that loads MorphSVG and TweenMax Run Pen Edit on CodePen Fork Add your own code Save Paste link in reply
  15. GSAP Canvas effect

    Hi and welcome to the GreenSock forums. The demo below should give you an idea of how something like that is set up http://fiddle.jshell.net/Zuriel/qGcd9/?utm_source=website&utm_medium=embed&utm_campaign=qGcd9
  16. Div folding open: best approach

    Hi and welcome to the GreenSock forums, I couldn't open your video file. Apparently QuickTime (Mac) doesn't like it. Not exactly sure of the effect you want. Animating the position of div corners isn't really a standard thing. But if you want to do something like: http://jsfiddle.net/ajgagnon/traebhhe/5/ It uses GSAP and perspectivetransform.js which you can read about here: https://github.com/edankwan/PerspectiveTransform.js Is there something on youtube or another site that can help us better understand the effect you are after?
  17. Seamless button state transitions

    Hi and welcome to the GreenSock forums, Thanks for the demo. Stuff like this where you want a bunch of different transitions on the same elements isn't always as straightforward as you might think. It can get kind of messy taking existing timelines and then trying to put them in different timelines at different times especially if you are reversing them. Once you put user interaction into the mix and let people jump to any state at any time it just gets complicated. For situations like this its probably better to create your animations on the fly. In basic terms you can create functions that create animations for animating certain elements out, and certain elements in. So you might call a function that creates your "AnimateLoadingOut" timeline and then call a function that creates your AnimateErrorIn timeline. You can glue the timelines that those functions create together into a parent timeline. Again, it isn't exactly easy to do or explain quickly. The article below is packed with information on the technique of using functions to create timelines. https://css-tricks.com/writing-smarter-animation-code/
  18. IDE for using GreenSock?

    In the Getting Started video we are using Sublime Text which is basically a text editor. I'm also using Live Reload which is a browser extension that does the same thing as browser sync but in a different way.
  19. Oooops ...

    Thanks for the reduced version Mikel. I think the issue has to do with how you are changing the transformOrigin while a bezier tween is running or some sort of overwrite. I will look into this more this evening for sure.
  20. GSAP + Canvas Particle animations

    Impressive stuff, guys! Very cool.
  21. Very cool. Big breakthrough. Thanks so much for sharing. I'm sure plenty of people will find this useful.
  22. waves or corners ? - can you trust your brain ?

    Nice work, mi_cky. Cool way of illustrating the illusion. There are no corners For more info, Keith Peters tweeted about this recently
  23. how can i add empty time in timeline?

    I had trouble understanding exactly what you want, but if you want the firebrick divs to wait 3 seconds until wheat is done AND you want the whole sequence to repeat you can use just 1 timeline. tl1.staggerTo('.box1', 1.3, { ease: Elastic.easeOut, x: 200 }, 0.05) .staggerTo('.box1', 1.3, { ease: Elastic.easeOut, x: 400 }, 0.05) .staggerTo('.box2', 1.3, { ease: Elastic.easeOut, x: 200 }, 0.05, "+=3") //wait 3 seconds before box2 starts .staggerTo('.box2', 1.3, { ease: Elastic.easeOut, x: 400 }, 0.05) If you need something different please clarify the exact order things should happen and how the delays and repeats should work. I wasn't sure if the wheat should start repeating on its own before redbrick started.
  24. Drag along an svg path

    very cool, Blake!
  25. animating circle shape

    So many great ideas in this thread. Nice work, all!