Spiderian
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Spiderian
-
It's okay. I scrapped it and used the extraSlider plugin. The buttons were just grey bars on either side. I didn't manually label each of the slides because depending on the project there would be a different number of pictures so I wanted them numbered dynamically. I could have probably written a code that would detect how many pictures and change "n" for slide(n), but it doesn't matter because the plugin is handling it really well. Thank you anyhow.
-
I made this sweet rotator that I can put as many images into as I could ever want, but I am trying to add forward and back buttons. It's not going well. I tried this code for the forward button but I can't seem to figure out how to add a 30 second pause before restarting the animation. rightBtn.click(function(e) { console.log( slideAnimating ); var btnIndex = rightBtn.index(this); if(!slideAnimating && btnIndex !== slideNumber) { timerFunction.pause(); nextSlide = btnIndex; changeSlide(); } }); Then the left button I want to play the animation in reverse to get the last image that was designated currentSlide and nextSlide to move backwards, wait 30 seconds then go back to the normal flow. Any help would be greatly appreciated.
-
Great Scott!! It works amazingly. I fiddled with the math and stuck it in an if statement to detect weather or not the "#body" has overflow so no mater what length of content it behaves accordingly. $(document).ready(function(){ var element = document.querySelector('#body'); if( (element.offsetHeight < element.scrollHeight) || (element.offsetWidth < element.scrollWidth)){ // your element has overflow var animationSpeed, baseSpeed = 8,//this would be the default duration of the instance baseHeight = 896,//this height is considered as the height of the element that would make the tween last for the time determinated by the base speed var elementHeight = $("#container").outerHeight();//use outer height in case you're adding padding and/or borders to the element's CSS function setSpeed(){ animationSpeed = baseSpeed * ( elementHeight/baseHeight ); }; setSpeed(); //you can call that function every time the element's height changes in order to change the animation duration accordingly function delayedStart(){ TweenMax.delayedCall(25, scroller); }; function scroller(){ TweenMax.to("#body", animationSpeed,{ scrollTo:{y:"max"}, delay:15, onComplete:backToStart }); }; function backToStart(){ TweenMax.to("#body", 0, { scrollTo:{y:0}, delay:15, onComplete:delayedStart }); }; scroller(); } else{ //your element doesn't have overflow } }); Thank you again Rodrigo!
- 15 replies
-
- 1
-
-
- percent scroll
- scrollTo
- (and 2 more)
-
Thanks Rodrigo. I realized I had the window in after. It works perfectly, but is there a way to have the "scroller" function based on the height of the child div? So if it only hangs over by 50px it scrolls faster than if it is over by 1000px.
-
Would this work for scrolling content in a div if it's parent is overflow hidden? function scroller (){ var bottom = $('#container').height(); console.log(bottom.height); TweenMax.to(window, 5, {scrollTo:{y:bottom}, ease:Power2.easeOut}); TweenMax.delayedCall(3, scroller); }
-
I seem to be missing something. I think it's not logging the mouse posistion more than once. http://codepen.io/Spiderian/pen/ktAaF
-
I was playing with paralax scrolling and found an old forum post about it following the mouse. The movement works well but I want to replace the pageX with the posistion of the div#viewPort offset. I tried a few things to get it and return it as a var but I couldn't get the doParallax function to read it. Any help is greatly appreciated.
-
I'm not sure what you're talking about. The js appending is the same id with an "a" at the end. rt01 -> rt01a. Your codepens don't seem to run.
-
Thank you both. You put me on the right direction The tabbing part isn't a problem; this is going on a non interactive player. It seems to be changing the text when I remove the old slide and then change the name of the new slide to the old one. http://codepen.io/Spiderian/pen/FBjhk
-
Hi, I am having trouble getting my animation to fire after I create new slides. I am trying to make a train board that updates from xml data every 20 seconds or so. 1. Create new slides 2. Animate new slides in from above the "slotXX" Futre steps: 3. Change div tag removing the "a" while changing z-index and removing hidden old slide 4. Repeat If anyone can set me on the right direction many thanks will ensue. I don't mind if you just point me to a tutorial that's almost identical or if you want to fork my codepen.
-
I don't think I'm that far off. My new codepen works almost perfectly but it doesn't seem to matter what disk you click. It just goes in a linear order. http://cdpn.io/IKvah I think there is something funny in the way the killAll handles stopping the current animation. For some reason the function don't appear to be attached to a disc, but instead they just go in order depending on how many times any of those buttons is clicked. disc01.onclick = function(){TweenMax.killAll({onComplete:animate_rot01});}; disc02.onclick = function(){TweenMax.killAll({onComplete:animate_rot02});}; disc03.onclick = function(){TweenMax.killAll({onComplete:animate_rot03});}; disc04.onclick = function(){TweenMax.killAll({onComplete:animate_rot04});}; disc05.onclick = function(){TweenMax.killAll({onComplete:animate_rot05});};
-
That fixes the killAll but how do I get it to killAll and then go to an play animate_rotnn? Do I have to word it with an oncomplete?
-
I am trying to build my own custom rotator, but I am having a problem with interrupting the current animation, then going to a specific one to play from there. I made a click function that plays from the desired spots, but I have tried several ways to interrupt the current animation. disc01.onclick = TweenMax.killAll(); animate_rot01; disc02.onclick = TweenMax.killAll(); animate_rot02; disc03.onclick = TweenMax.killAll(); animate_rot03; disc04.onclick = TweenMax.killAll(); animate_rot04; disc05.onclick = TweenMax.killAll(); animate_rot05; Here is the link to my codepen http://cdpn.io/IKvah If I take out the killAll it plays through fine, but when I add it, it seems to fire before I click anything. Any help would be awesome. After I figure out how to kill the animation I want to have the click ignore the delay.
-
Using a combination of both of your advice I got it working smoothly. I had to add an extra layer to hide the map holder. Then I made the holder way bigger and offset to have room to the top and left. The hierarchy made it so you can't drag the map off the screen before I scale it up. Thanks!
-
It breaks the coding for my draggable and I am struggling with an if statement so it won't allow scrolling until it is zoomed in. I'm trying to make a map that you can zoom in and out to different locations and drag around. It seems to break if I do anything but zoom to the top left corner. All the images are 2000px square pngs. I force them to start at 1080px. I didn't think it would be this hard to redefine the area after zooming in.
-
I think I may have thought up a work around, but I am not sure how to implement it. What if I have it just zoom to the top left while scrolling to a focus point. Like a hidden item with a specific area, maybe a radio button that is un-clickable. Does GSAP have a focus command? If not what about the scrollTo function. I wouldn't mind if it zoomed in and scrolled back to where you are, or zoomed and scrolled to hide the adjustment.
-
HA! I solved it myself. I was using an older version of jQuery. The solution is put the $(document).ready(function(){ var pTab = document.getElementById('pTab'); var vTab = document.getElementById('vTab'); var aTab = document.getElementById('aTab'); TweenLite.from([pTab,vTab,aTab], 1, {left:0, delay:1}); }); at the bottom of whatever page you want to load.
-
Quick question. If I use the .load to change the content of a div, after it loads I want to have things animate on it, how can I get around "cannot tween null object" error? I know the elements don't exist yet, but I am having trouble figuring where to put the $(document).ready function. function animate_focalTag(event){ focalTag.animate_focalTag(), $("#content").load("focalPoints.html"), $(document).ready(function(){ var pTab = document.getElementById('pTab'); var vTab = document.getElementById('vTab'); var aTab = document.getElementById('aTab'); TweenLite.to(pTab, 1, {left:0, delay:5}); }); } I tried putting it at the end of the html I load, but then I get weird errors from jquery.
-
It's neat and will be used down in conjunction with this project, but I want the pieces to overflow off in all directions, like when you zoom in on google maps. I want to be able to scroll in all directions regardless of what's hanging off where.
-
Thanks johnathan. That put on the right path to showing you my problem. I forked with your codepen and got it to react just like my local files. http://codepen.io/Spiderian/pen/IJFua When you hit the top button it makes parts go off the canvas. I set the #canvas to overflow: scroll; and that allows me to see everything down and right, but it makes the top/left inaccessible. That is the meat of my problem.
-
http://jsfiddle.net/Spiderian/JU9zP/1/ The buttons don't fire on the jsfiddle. Any hints with that would be awesome.
-
I have a container div that has overflow: auto; and then I use tweenlite to zoom in some of the images. I like that it zooms to the center using the scale feature, but it only let's me scroll down and right. It chops off anything in top or left. I can get everything if I scale then more the top and left negatively, but I don't want to zoom to the top corner. Is there a way to re register the size, or a workaround? Thanks
-
http://jsfiddle.net/Spiderian/C4Sw5/
-
Here is my js fiddle. For some reason though, it's not reading the greensock js I wrote.
-
Thanks. I decided to go with jquery overscroll; I got it to work really easily.