Leaderboard

Ah, I think that may be a node-specific thing that's resolved in the next release which can be previewed (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js - is that better?

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

Hi @jSwtch, The lines 14, 24 and 32 are not necessary - a little mistake ("invalid morphSVG tween value: [object Object]"). The function 'start' unintentionally (?) flashes some objects. Happy tweening ... Mikel

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.

It was pretty trivial to figure out what is updating what. Actually you need to seek the audio so it will resume from exact time where slider is. So on click event I am setting current time to tl.progress() * audio duration. Also, check this thread as it states some browsers don't return duration so you have to listen to event when metadata is available. Maybe using a audio library will be more useful. https://stackoverflow.com/questions/11203773/how-can-i-get-the-html5-audios-duration-time

Hi @mikel & @OSUblake. Thank you for the great examples, i made it work, and it works incredibly well. I will make sure to post a link, gif or small video when its done Huge thumbs up from here! - Plenge

You guys are simply amazing. This really is the best forum out there. Thank you @Carl

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:

Hi @bparticle, I looked at the individual parts of the SVG. https://codepen.io/mikeK/pen/5640f95d0efe846102b806e64b98a5dc/ It is difficult for me to imagine what intermediate levels or which final "picture" should arise. One way to control morphing is if both paths contain the same number of anchor points. Best regards Mikel

@Sahil Many tnxs for your solution. it is exactly what i was looking for

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.

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.

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

Brilliant! Thank you for two extremely useful answers. I feel a bit duhh for not starting from the possibility that GSAP had its own debug tools already, but such is life...

Demo that fixes fast clicking, Demo with swipe only. I think to take advantage of all features of draggable, it will be a lot better to create a fixed rotating cube and change the images on the fly as it rotates.

Hi @OSUblake, Based on your pen (Motion Path Callbacks) I had this idea - still in progress: 'On foot' - that means: classically with my knowledge - I can control the process well. But your camera should be the next trigger ... Thanks and kind regards Mikel

What makes you think animating something on hover would be hard? You can do some interesting stuff with SVG filters, but there's only a handful of them, and they can suffer visually due to aliasing issues. I made that ripple animation with SVG just to see how it would look, but it was originally done with PixiJS. If you're looking to bend, twist, and distort stuff for an animation, then you should definitely check out PixiJS. They have tons of filters that can do all sorts of craziness, and they're constantly adding new ones. I just noticed some new ones have been added over the past couple of weeks. ? AdjustmentFilter ? CRTFilter ? GlitchFilter ? ReflectionFilter ? KawaseBlurFilter ? RadialBlurFilter ? MotionBlurFilter ? OldFilmFilter Go through and play around with all the filters here. You should be able to find several filters that could be used for your project. http://pixijs.io/pixi-filters/tools/demo/ And to help out, GSAP has a plugin to make animating things in PixiJS much easier.