Search the Community
Showing results for tags 'scroll'.
Found 260 results
-
Hello all, I have a slight problem and any help would be greatly appreciated, I am an animator new to the world of code and greensock. I'm looking to build something similar to the visions section on this waaark site: http://waaark.com/vision/ As you can see from the code pen I have built the outer circle forming and have built a timeline with a slider to controll the progess of the outer circle. I have managed to link each point so that when it is clicked the timeline go to the corrrect progress. http://codepen.io/Ryan84/pen/rWLNLN ideally I would Like this to tween to the correct progress and not jump as it is currently downing. I've tried a tweenTo() put cant seem to get this to function. The box2Timeline also should not animate the full way through as it currently does but function like waaark once this is fixed I'm going to also add a scroll function and then a inner icon to animate on when the corresponding point is clicked. Any help would be greatly appreciated. Kind regards, Ryan -
Hello, I'm using GSAP to build scroll controlled animation using a timeline. 1) I have a container with a list of images, one next to the other, and when I scroll normally (so, vertically), I make the images slide to the left. 2) Sometimes I need to stop the sliding and animate something else (make something to appear and so on), before proceeding again with the sliding. This needs to happen at a specific moment, or position: usually I want one of these images to stop precisely in the middle. 3) the whole thing needs to be responsive I managed to do almost everything, but the point 3. In order to make it responsive, I set a fixed maximum size to the container div and on window loading I check if the window is smaller than this size, in which case I scale everything. So, the scaling works pretty well, but it messes with the calculations I made for the animation. In the pen I created I'm trying to stop the animation exactly when the left border of the third rectangle reaches the black line. At row 32 I'm calling the resize function to set the initial size. If you comment this call out you can see that it works fine, if you leave it, the rectangle will be always slightly off. Why is this the case?
-
Greetings everyone. I'm attempting to highlight items in a list while the list it is being scrolled by the browsers scrollbar using ScrollMagic and GSAP. I sort of got them working individually but am unable to combine the two animations. I've setup a code pen in hopes that someone might give me a little direction. Thanks. Note: Ended up using gradient overlay for similar effect. Sorry for including ScrollMagic in my post. Any future posts will be in regards to GSAP specifically.
-
Hello ! Sooo, I'm trying to play a little with ScrollTo plugin and ScrollMagic.js my goal is to achieve smooth scroll to the bottom of the footer (that works) http://codepen.io/Dikus/pen/jAjoqN and then (after the user scrolls once up on the footer element) go back to the view where top of the footer is right at the bottom of the viewport. Problems I encountered: Scrolling works only once and only in one direction - usually ScrollMagic reverses all animations etc.so after scrolling back up from the bottom of the footer It would be lovely to achieve smooth scrolling in both sides and always when user is navigating through the website - not only once I bet it's possible, and that I do something terribly stupid Can you guys please help and give me some hits how to work this out? Maybe it's not possible to do this with ScrollTo and ScrollMagic but they are not a must. Any help will be more than welcome !
-
Hi, I created little AS3 aplication for simulate LED display. User can modyfy xml file to set some parameters like: font size and style, textfield position and size. I do animation by this code: var bannerW1: Number = txt_1.width var bannerH1: Number = txt_1.height; var banner1: BlitMask = new BlitMask(txt_1, txt_1.x, txt_1.y, bannerW1, bannerH1, true, true, 0x00DDDD00, true); banner1.bitmapMode = true; var tween1: TweenMax = new TweenMax(txt_1, 9, { x: -txt_1.width, repeat: -1, ease: Linear.easeNone }); var bannerW2: Number = txt_2.width var bannerH2: Number = txt_2.height; var banner2: BlitMask = new BlitMask(txt_2, txt_2.x, txt_2.y, bannerW2, bannerH2, true, true, 0x00DDDD00, true); banner2.bitmapMode = true; var tween2: TweenMax = new TweenMax(txt_2, 9, { x: -txt_2.width, repeat: -1, ease: Linear.easeNone }); I noticed that scroll speed depense on text field width (longer field = fastes scrool). Is there any way to set scroll speed constant independently of text field width? Best! Pandik.
-
Hello, I know a similar question has been asked before, but I think my case is a bit different and I couldn't find a solution. In the pen I posted I have a very long image which I want to scroll from the beginning to its end, which mean that it should stop when its right edge reaches the right side of the window. In order to do this I calculate the distance, so the amount of x translation, as the difference between the image width and the window width. I know about the xPercent property, but I guess that it's not useful in this case, because I have no way of using it account also for the window width. Anyway, the animation works fine. But if after the first animation you resize the browser window and click repeat (top right corner), the image doesn't stop at the right point: it goes too far left, or too far right, depending how you resized the window. So, I'm thinking that the solution would be to update the values inside the tweens on the window resize event. I'm not sure how to to this, or if that's even possible. Is there a better, more appropriate, approach?
-
I'm using Fullpage.js and I have animated the elements of each section to fade in. The animations work awesomely well but the ones from the lower sections run offscreen and when the user scrolls to the section the elements are static. I need the animations of a specific section to commence when the user scrolls to that section. Any way i can achieve this? Thanks in advance!
-
Hai What i am trying to achieve is to infinite loop the scroll animation. I tried with some basic looping. But is it the right way of doing this. Also it is having responsive issues and there is a delay when after every slide starting. I tried as much as i can to make it working.
-
Hi Guys, I'm creating a website where I have to animate (approx. 50) svg lines from bottom to top of the screen in different tempi. I made it with staggerFromTo, but then I can't randomnize the the speed of each lines (se the attached image). Now I'm trying to create this with a for loop where i add tweens to a timelineMax, but I cant get it to work var thinLineArr = []; var num = Math.ceil(ww/lineThickness); transitioncontainer.css({'height':wh}); // Adding all the lines to the scene var svg = '<svg id="transition-top-svg" version="1.1" xmlns="http://www.w3.org/2000/svg">'; for (var i = 0; i < num; i++) { var line = '<path class="transition-line" d="M ' + (lineThickness * i) + ' 0 l 0 ' + wh + '" />'; thinLineArr.push($(line)); svg += line; }; svg += '</svg>'; transitioncontainer.append(svg); //Starting Scrollmagic var timeline = new TimelineMax() for (var k = 0; k < num; k++) { timeline.add(TweenMax.from(thinLineArr[k], 2, {scale: 0})); } var scene = new ScrollMagic.Scene({ triggerElement: "body", duration: 1000, offset: 100 }) .setTween(timeline) .addTo(scrollMagicController);
-
I have a horizontal gallery that is positioned centered on the page. I have a left and right button which slide the gallery left and right using TweenMax timeline on mouse hover. The right button is hidden on page load and I want to show the right button once the gallery reaches a certain offset position. If I use Jquery scroll I can detect the changing offset position of the gallery but if the user hovers on the button I can't get the changing offset position of the gallery while the gallery is tweening. How can I get the moving offset position of the gallery during mouse hover?
-
Hi all. Complete newbie to GSAP here. i'm looking forward to getting to grips with it to add some animation to a site I'm currently redesigning. At the minute though there's one legacy script on the site, which relies on jQuery. It's just a wee utility script which will animate scrolling to any element on a page with an ID attribute set. [see the Codepen] I want to "translate" this to GSAP instead, as it seems daft loading jQuery as well as GSAP, just for this one feature. However my JavaScript Fu is a bit rusty and I'm not having much luck working out how to GSAP-ise my selector. The function is supposed to be triggered when a link is clicked with an href of `#someID` but not for an href of `#`. GSAP doesn't seem to like the `:not` selector... or my attempts to adapt the syntax are wrong. Here's the jQuery version: $(function() { $('a[href*="#"]:not([href="#"])').click(function() { // do stuff }); }); Could anyone give me a few hints?
-
I am working on a parallax page, but i have problems moving my elements while scrolling without the choppy behavior. Something tells me that the combination of top/bottom and translate is the root cause, but i am not sure how i solve my task without top/bottom? I am trying to create a behavior where all the elements are almost on top of each other when i have almost reached #section2. How can i avoid this choppy behavior? Its very important that the elements are placed as they are, but i think my usage of top and xPercent is causing performance issues
-
Hi, I've created a timeline and tweento buttons that are working as I have hoped. What I also need to happen isa scroll to trigger the same as the click function. For example the following tweens to the label slide2, I'd like an initial scroll down to also tween to that label. $("#two2").click(function(){ tl1.tweenTo('slide2'); }); Any pointers much appreciated. Thanks!
-
Hello, What I am trying to do is combine the DrawSVG plugin with this awesome pen, so that a line can be drawn based on the location of the browser scrollbar. Ultimately I would like to make the dotted line reveal with the rocket ship, so that it appears as though the rocket is leaving the line as a tail behind it. What I hoped to do was create 2 timelines so that I could match up the timings of the rocket and the line reveal. What I can't seem to do is get the DrawSVG plugin to respond to the custom code which links up the timeline to the scrollbar. I was also thinking there might be some simpler way to do this by revealing the line with a mask, but I was not able to find any methods which might work with the browser scrollbar. I'd really appreciate any tips, similar projects, or help you might be able to give. Thanks a ton, Savana
-
Hi, I am using a combination of ScrollMagic and GSAP to achieve a scroll-based (100% height/duration) animation at the top of my page. Everything works great in Safari/Chrome/Firefox, but when I test on mobile (iOS) the animation is all screwy. Seems to be an issue with overflow and/or viewport height, but I cannot seems to find a fix. Apologies in advance if this is an issue related to ScrollMagic (not GSAP), as I am still getting acquainted with both. Live site can be found here: http://aigasd.github.io
-
I'm trying to recreate the function Scroll (Drag & FLick) from GreenSock (https://greensock.com/draggable ) on my website to make an image navigation throught a small city. SO I set the background-image on the div #scroller but it doesn't seems to be working as it should be, the image is not dragging at all So here's my jsfiddle http://jsfiddle.net/8ekpmpxx/1/ And hope someone could give me a light on this, thanks in advance
-
Hi, Since helping Stefdv in this topic i dug a little more into parallax and scroll controlled Tweens/Timelines, and i dedicated some time to create a tutorial and some code in order to help GSAP JS users to create some apps and web sites using this technique. Is not a lights-out-blow-your-mind type of tutorial, but i just was hoping to help some other users who might want to apply this into their creations. Here you can find the tutorial, as well as the source code and a couple of examples, since i don't have a blog of my own, i'll take the liberty to point comments here, unless the staff says other thing. Since i started with this tutorial i found a lot of things about parallax and because of that i will make a second tutorial which i haven't started yet, but as soon as my schedule allows me to i will write it. I hope you enjoy it, Cheers, Rodrigo.
-
I am getting this weird error trying to use BlitMask when debugging on my android device: Error #2030: End of file was encountered. And it is coming from this part of the BlitMask code, on TOUCH_BEGIN event (when i put my finger down on the BlitMasked object): /** @private **/ protected function _mouseEventPassthrough(event:Event):void { if (this.mouseEnabled && (!_bitmapMode || (event is MouseEvent && this.hitTestPoint(MouseEvent(event).stageX, MouseEvent(event).stageY, false)))) { dispatchEvent(event); } } When debugging in emulator, the error does not happen, only when debugging on device. Does anyone know how to fix this issue?
-
Sorry Im a new user of greensock . I want to achieve a 100% screenHeight scroll whenever user scroll until the trigger : ================================================================================ var tween7b = TweenMax.fromTo('#red2', 1, {y: "100%"}, {y: "0%", backgroundColor:'#C74A00', ease: Linear.easeNone}); var tween7c = TweenMax.to('#red2', 1, {y: "-100%", backgroundColor:'#C74A00', ease: Linear.easeNone}); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.85}) .setTween(tween7b) .addTo(controller); new ScrollMagic.Scene({triggerElement: "#trigger6e", triggerHook: 0.45}) .setTween(tween7c) .addTo(controller) .addIndicators(); ================================================================================== Sometimes its work, but sometimes it failed. I guess its getting confused because of two TweenMax.fromTo affected the same ID ? how could I achieve what I want then? thankyou before -
I have a movie clip that I want to drag "scroll left" in 650 pixel increments. I have a movie clip (mc1) that is 650x650px on the stage (embedded within this clip is a symbol (mc2) that is 3250pxs x 650pxs (divided into 5 images) I want to drag through mc1 in 5 swipes revealing each image (650x650) on mc2 //movie clip 1 Draggable.create(mc1, {type:"scrollLeft", edgeResistance:0.5, throwProps:true}); Could you help me with the code that I need to initiate this please, I just need a push in the right direction and away I'll go until the next hurdle. Learning heaps and loving it.
-
I am doing my first GSAP animation (yay for me)! The div containing the animation is below the screen when the page loads -- both on desktop and mobile. I don't want it to begin animation until the user scrolls to it. I want to verify that, in order to do this, I need to do something like the following: myTimeline.to('body', .5, {scrollTo:{y:250}}); with "250" being the distance of the div from the top of the page. Is this correct?
-
Hi everyone, hope you are fine ! I come today with a new question about tweenmax. I have a earth to make rotate while the user is scrolling (position fixed). Then the earth has to transform in an other item. Well, after some research on your forum I discovered that you can have something fluent and nice with sprite sheets. and this function : TweenMax.to(obj, 0.2, {x: "-=1194px", ease:SteppedEase.config(3)}); Sooo I have 20 images in my sprite for a width of 7960px. The thing is, when I am rotating while scrolling, I can't do something like : x: "+= scrolling value". If I am not in good proportions the animation is broken. But in the meantime, if I scroll to a maximum position the animation has to be completed before transforming in an other object ! So I decided that each time I scroll, I will send 1194px to x, that correspond to 3 images. But, if you scroll very slowly you won't arrive in the next image's area before the end of spinning animation! Do you have some idea or tips of how I can synchronize tweenmax with a scroll ? I am hesitating about using scroll magic but I am afraid that it will use a huge amount of time to implement / masteries. EDIT: here is a codepen I made. http://codepen.io/anon/pen/VLJWrX
-
Hello, I am trying to build a UI where two arrows – up and down – control the scroll position. The scroll element is a Draggable. var scroller = $('.scroller.draggable'); Draggable.create(scroller, { type:"scrollTop", edgeResistance:0.75, throwProps:true, onDragStart: function() { Draggable.get(menu).disable(); }, onDragEnd: function() { Draggable.get(menu).enable(); } }); $('.icon-arrow-down').on('click', function(event){ TweenLite.to(scroller, 1, {scrollTo:{y:$scope.yStart}, ease:Power2.easeOut, onComplete:updateYScroll}); function updateYScroll() { console.log(this.scrollY); //$scope.yStart = scroller.scrollY + $scope.yIncrement; } }); But when calling scrollY I always get undefined... Greetings, luneyard
-
I touched on this in a previous posts but am still to find the perfect solution for mixing Draggable dragging/scrolling with native browser scrolling. 1. Open the attached Codepen 2. Emulate touch events - open Chrome inspector and emulate a device such as a Nexus 5 3. Alternatively view the Codepen on a device 4. Alternatively view the screen cap below Basically, you will see that it isn't possible to scroll the page vertically when the drag starts on the Draggable carousel (blue blocks). I've examined Draggable.js source code but I can't figure out where you the relevant scroll / touch event are being intercepted. Could you point me in the right direction? I know one work around is to use a second Draggable to control vertical scrolling but this isn't an option for us, we need native browser scrolling when scrolling vertically.
-
Is there a built in option to auto-scroll the container of a draggable element when the draggable is moved beyond the container? I am currently hooking up to the onDrag event and doing thing based on Y pointer. I kinda get the result I want. But still curious if there was a default option provided or anyone else has done it better.
