Eugene Rayner

Hi there! I am just looking into ways to animate things without using position absolute and left and right properties. with flex I can center something in the middle of the page very easily. How would I go about animating something from right to center but not using position absolute? Cheers

Answered my own question If you're looking at doing something similar to me then i suggest you follow something similar below: var controller = new ScrollMagic.Controller(); var creatureMoves = TweenMax.to(document.getElementById("creature"), 5, { bezier: { type: "cubic", values: [{ x: 100, y: 250 }, { x: 150, y: 100 }, { x: 300, y: 500 }, { x: 500, y: 400 }], autoRotate: ["x", "y", "rotation", 0, true] }, ease: Power1.easeInOut }); // container pin var startpin = new ScrollMagic.Scene({ duration: 2000 }) .setPin("section#start") .addTo(controller); new ScrollMagic.Scene({ offset: 20, duration: 180 }) .setTween(creatureMoves) .addTo(controller); Essentially, we are setting the start section of a container to 100vh. Then we tell scrollmagic to pin that start container to the top of the screen and don't move for a set duration. Then we create variables for greensock's tweenmax animations. Finally we grab the variables and setTweens to scrollmagic scenes. Hope this helps anyone in similar situations. Cheers!

Hello! I've been looking into creating an effect that I see a lot of modern websites using. Im not sure if im meant to be using scrollmagic or not but it seems like quite a good library to plugin to gsap. Here's an example of the effect that I am trying to create http://lamoulade.com/#!/home The website above displays items on the webpage while you scroll. I am looking at creating something similar. I thought the best place to start was to create a bezier curve, and have it only animate along the curve while I scroll - the only problem is, I have NO idea where to start. Should I be looking at ScrollMagic's 'pinning' of objects and have them set to containers? Not sure. Thanks in advance to anyone that posts any information on this topic. Cheers!

cool, ill look into canvas today thanks!

Hello! I am currently trying to mimic the effect on this website: http://brightmedia.pl/ If you scroll down in my codepen you can see a similar effect with the line being drawn. I was wondering if anyone knew/has done this before and could provide me any additional information in: A. How do I keep the point of drawing in the middle of the window B. How do I go about adding extra paths to the animation? Do I get seperate SVGs to trigger on scroll? Thanks for any help in advance

Yes that looks good. Do you know how we can have the clouds not all end up at the same position at the same time? ie more of a cloud effect rather than all racing to the same position? Cheers

Hi Mikel, I mean that they should tween indefinitely, but I want them to tween until they are off the page ie the clouds go from 1 side of the screen, to the other side of the screen. Cheers

Hello, Simply trying to have my "clouds" (the red boxes that say cloud) to repeat. Currently, they are repeating, but the animation doesn't end (the cloud doesn't make it to the other side of the screen) There are about 5 different clouds on the page and I want them all to move at varying speeds, and then loop once they can no longer be seen on the page. Any help greatly appreciated. Cheers!

Okay thanks a lot. Ill have a look around. Once I get something working ill come back with my fadein/fadeout question. Have a nice day!

Sorry for the confusion. Please ignore the ajax comment. I just want my button to take user to the next page and I want it to fade in and fade out Cheers

Code isn't working and also looking for a way to do this. I have tried to create a pen but unfortunately I think a Pen wont work for this.. I am trying to get my next 'about.html' page to fade in once navigation has been clicked on 'index.html' It might not be as simple as I was thinking. Might be an Ajax thing? Cheers http://codepen.io/erayner/pen/EmdWEG

Hello. Trying to figure out a way to use fade out and fade in when user clicks on navigation. Essentially, user click on navigation, the current page fades out, and the clicked navigation page fades in. $(document).ready(function () { //navigation button that appears on the home page var aboutpageButton = $('#aboutpageButton'); //homepage id var homepage = $('#homepage'); //aboutpage id var aboutpage = $('#aboutpage'); aboutpageButton.addEventListener("click", function() { //add code for page fadeout //e.preventDefault(); TweenMax.to(homepage, 3,{opacity:0}); TweenMax.from(aboutpage, 3,{opacity:0}) }); }); any help greatly appreciated. Thanks!

dude, this is awesome. Thanks a bunch

Hello, I was wondering if anyone could provide me with a snippet on how to use SplitText and mouse events? I have done some snooping around but all, so far, has been fruitless. Here is what I have so far var myHeaderSplit = new SplitText(".text-container h1", { type: "words,chars" }); var headerChars = myHeaderSplit.chars; TweenMax.staggerFrom(headerChars, 0.5, { opacity: 0, rotation: -720, scale: 100, ease: Power1.easeOut }, 0.2); headerChars.onmouseover = function () { TweenMax.to(headerChars, .2, { css: { opacity: 0 } }); } any help greatly appreciated

do you know how i can have the underneath background expand both ways instead of just expanding right? using skew now. Cheers https://codepen.io/erayner/pen/qmxaqV

Hello, I am trying to mimic an animation -> the first scroll animation on this page https://www.box.com/ So far as you can see from my codepen I have mimic'd it (Kind of). I am looking for better ways/any extra help/tips and tricks anyone can give me. Please go ahead and fork my codepen, and give it a go for yourself. I may have done it completely wrong, this is a learning experience for me. Hope to see some comments in this discussion. It's a pretty hard animation to mimic. Should I be using SVGs to mimic this animation? Thanks

awesome, thanks for the quick explanation

Hello, For some reason when I add 'position: absolute' to my 'box' class, it breaks my whole animation. Any explanation why is greatly appreciated. Cheers

Thanks. I get how to do scrollMagic etc but I am just really looking at how they do the animation. I have realised that you can control padding with animation -> increasing the padding on objects to make them bigger from a point of 0. Now I am looking into angled divs and will post here once I have something pretty similar

Hello, I was wondering if anyone had any idea how this website https://www.box.com/ did their first animation? ie, as you scroll down, the box opens up and shows images -> how do they do the box that opens up? Any help greatly appreciated

old threat but wondering if there is an option for this to use for stagger? obviously I want all of my duplicate classes to run before it hides! (onComplete)

Solved my own problem using setTimeout TweenMax.staggerTo("#section1 .animated", 2, {opacity: 0}, 2, "-=0.5") setTimeout(function(){ question1.hide(); },6000) setTimeout(function(){ question2.show(); TweenMax.staggerFrom("#section2 .animated", 2, {opacity: 0}, 2, "-=0.5") },6000) )}; However, if anyone knows anything cleaner, please do tell!

Hello! I can't create a codepen because I have too many scripts that I can't load in. Essentially, I have a container. In this container I want to show and hide another container which has different content when you click the 'next' button... and I want to use gsap staggerFrom to hide the elements and then staggerTo to show the next element. My problem is that I am not sure how I can use jQuery show() and hide() functions with gsap. I don't really want to resort to using position: absolute. Here is my html: <div id="questions-container"> <!-- range slider template --> <section id="section1"> <div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <h1 class="animated">Q1</h1></div> <div class="col-sm-12 text-center"> <form class="animated"> <input id="slider1" type="text" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["<p><b>Minimum</b></p>", "<p><b>Medium</b></p>", "<p><b>Maximum</b></p>"]' data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide" /> </form> </div> <div class="co-sm-12 text-center animated"> <button class="button">Start the Questionaire</button> </div> </div> </div> </section> <section id="section2"> <div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <h1 class="animated">Q1</h1></div> <div class="col-sm-12 text-center"> <form class="animated"> <input id="slider2" type="text" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["<p><b>Minimum</b></p>", "<p><b>Medium</b></p>", "<p><b>Maximum</b></p>"]' data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide" /> </form> </div> <div class="co-sm-12 text-center animated"> <button class="button">Next Question</button> </div> </div> </div> </section> <section id="section3"> <div class="container"> <div class="row"> <div class="col-sm-12 text-center"> <h1>Q3</h1></div> <div class="col-sm-12 text-center"> <input id="slider3" type="text" data-slider-ticks="[1, 2, 3]" data-slider-ticks-labels='["<p><b>Minimum</b></p>", "<p><b>Medium</b></p>", "<p><b>Maximum</b></p>"]' data-slider-step="1" data-slider-value="1" data-slider-tooltip="hide" /> </div> </div> </div> </section> </div> Here is my JS var question1 = $('#section1'); var question2 = $('#section2'); var question3 = $('#section3'); question2.hide(); question3.hide(); var question1Button = $("#section1 .button"); //-- show next container --// question1Button.on('click', function () { console.log("I am being clicked"); TweenMax.staggerTo("#section1 .animated", 2, {opacity: 0}) question1.hide(); question2.show(); TweenMax.staggerFrom("#section2 .animated", 2, {opacity: 0}, 2, "-=0.5") }); I was using timelineMax but I couldn't put the hide/show functions in there so now I am stuck. Any help is greatly appreciated!

Thanks for the tips! Ill have a go with the fixed position divs -> that's a good, easy work around. And thanks for the stagger idea, I didn't realise I could stagger animations. Cheers

Hello there, How would I go about creating 'masks' on the sides of my page where the elements slide in? I see this done very well on this infographic https://www.ceros.com/examples/visage-data-storytelling/ Thanks in advance EDIT: Obviously I am new to use lots of tweens on 1 page - is there a way I can minimize my code? Cheers