Leaderboard

This is perfect, thank you so much...

Hi @DTales, Sorry that I did not care that you are already a member. Best regards Mikel

Keep in mind that CustomEase isn't in the github repo or the NPM registry (because it's only for people with a GreenSock account). All you need to do is download the zip file from our web site after logging in. Have you tried that? I wonder if maybe you were using the public files or something (which wouldn't have CustomEase). If you're still having trouble, feel free to post your project either from github or zip the files together so we can see exactly what you've got going on. I'm sure we can help identify the problem once we see your files/setup. Thanks for being "Shockingly Green"!

Hi @DTales; The good news: It works. The other good: You use a trial version of the Club GreenSock bonus plugins that only work on CodePen. The third good news: You can become a member of the GreenSock Club and use this and other great GreenSock plugins ... Happy weekend and tweening ... Mikel

Thanks to the amazing documentation of GreenSock, I have found the solution. I just add a position parameter at the and of each tween. At the end: let controllerPerspectiveFirst = new ScrollMagic.Controller(); perspectiveTimeline = new TimelineMax(); perspectiveTimeline .to( '#as-perspective-bg--mountain--01', 4, { autoAlpha: .72, scaleY: .8, scaleX: .8, ease: Power4.easeOut }, 0 ) .from( '#as-perspective-bg--mountain--02', 4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut }, 0 ) .to( '#as-perspective-bg--mountain--01', 4, { autoAlpha: 0, scaleY: 0, scaleX: 0, x: '-40vw', y: '-70vh', ease: Power4.easeOut }, 1 ) .to( '#as-perspective-bg--mountain--02', 4, { width: '180vw', scaleY: .6, scaleX: .6, x: '-40vw', y: '-28vw', ease: Power4.easeOut }, 1 ) .from( '#as-perspective-bg--desert', 4, { scaleY: 1.4, scaleX: 1.4, autoAlpha: 0, ease: Power4.easeOut }, 1 ); But I do have another question, it may sound stupid. While using ScrollMagic is there point to add a second to the tween?

Hi @DTales, Welcome to the GreenSock Forum. A reduced CodePen which reproduce this error would be helpful. Kind regards Mikel

As PointC said - it's a waste of resources (read browser's memory) to create new timeline every time you call a function. Just create your timelines *calling* the function once and then control each timeline calling its functions, not calling a timeline creation function again. Modified CodePen: https://codepen.io/mattsrinc/pen/ZqYeRv Do note that you can change the z-order of objects in DOM very easy but SVG (if you will use it) doesn't have third dimension and an object that resides in a file the last will get drawn above all other. Usually this is solved by recreating the object again (removing and adding it), some javascript libraries have "put on top" commands for that.

Hi @Rezpo, Did you expect this effect? Use x and y values to move the eyes. And: both IDs or set a common class like '.eyes': Happy tweening ... Mikel

Thanks a lot guys that's what I was looking for! I'm happy to see such a great and helpful comunity. - Gabriel

I'm loading the JavaScript from another pen. https://codepen.io/osublake/pen/e72106811a34efcccff91a03568cc790.js Feel free to use it, but I really can't offer support for it. I never got around to making it work correctly for mobile. The address bar causes problems when it moves in and out of view.

SplitText doesn't have anything to grab the last character or last word, but the wordDelimiter will allow you to specify where a word should be split. So if you want to throw a special character into your h1 you could do something like <h1>Latest News*!</h1> <h1>Questions*?</h1> and then var tl = new TimelineLite, mySplitText = new SplitText("h1", {type:"words", wordDelimiter:"*"}); that will result with 2 divs inside each h1 which may be an SEO NO NO. I also doubt you want to inject characters into your h1, but that's the easiest way I could think of by leveraging what SplitText can do and not writing any custom js. It's probably going to be better to write your own function that searches each heading for those characters and wraps them in spans.

Aha! Figured out the issue - apparently the new version of React has an "onclick" handler on the root element, thus Draggable tries to politely stay out of the way by opting out unless you set dragClickables:true on your Draggable. Or you can set your own clickableTest function, but that's more advanced. So this isn't a bug in Draggable - it's how it's supposed to handle elements that are "clickable" (outside of Draggable), and it's easy to override if you need to. In short, just add dragClickables:true and you should be golden. I'm not sure why React is adding that onclick now to the root. Anybody know?

Well, here's the start of something. Put a data-depth attribute on your element like so. 0 will be no offset, 10 will be max offset. <div data-depth="10"></div> And then create a smooth scroll instance. var scroller = new SmoothScroll({ target: document.querySelector("#scroll-container"), // element container to scroll scrollEase: 0.1, // scroll speed maxOffset: 500 }); With maxOffset set to 500, an element with a depth of 10 will move 500px. 10 / 10 * 500 = 500 A depth of 5 will move 250px 5 / 10 * 500 = 250 And so on... 4 / 10 * 500 = 200