Carl last won the day on January 13

Carl had the most liked content!

Carl

Administrators
  • Content count

    8,378
  • Joined

  • Last visited

  • Days Won

    501

Carl last won the day on January 13

Carl had the most liked content!

Community Reputation

7,060 Superhero

About Carl

  • Rank
    Administrator

Profile Information

  • Gender
    Not Telling
  1. 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
  2. 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:
  3. How to add this CDM 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.
  4. 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.
  5. 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.
  6. 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.
  7. 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.
  8. 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!
  9. 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
  10. 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
  11. 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?
  12. 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/
  13. 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.
  14. 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.
  15. GSAP + Canvas Particle animations

    Impressive stuff, guys! Very cool.