http://codepen.io/TPDBrendan/pen/xgwWwM
I'm trying to get a full page clip style slider set up to handle resize, but I seem to be going in circles at this point despite trying a bunch of suggestions on this topic from the forum.
I've already accomplished the basic effect - screen split in half vertically, each side has a timeline that is wiping towards the center revealing the slide below, which is simultaneously sliding towards center. Right side is on a slight delay intentionally. If you load the codepen and don't resize, you'll see what I mean.
Window resizing is throwing me a curveball, though. I've set up debounced functions to kill the 2 current timelines and then rebuild them again with new resized viewport dimensions. It's getting the new window dimensions and setting up a new timeline with these specs succesfully, but resizing several times reveals that it must not be killing the old timelines and is just creating multiple copies at each viewport size.
I'd like to be able to save the progress of the current timeline before destroying it and then initialize the new, resized timeline to this progress point so that to the user it just looks like one animation that pauses slightly on resize. Would also be great if, once the animation completes, window resize will not be able to initialize another timeline, so it can rest on the final slide. But, for now, just figuring out how to solve the current duplicate timelines issue would be awesome!
These are functions I'm using on resize, but kill doesn't seem to do anything.
function resizeLead(){
prog1 = tl.progress(),
prog2 = tl2.progress();
tl.seek(0).kill();
tl2.seek(0).kill();
}
function resizeTrail(){
windowSize[0] = $(window).width();
windowSize[1] = $(window).height();
buildTL();
}
Related
I need to be able to animate drag and drop in my vertical list. I used vuedraggable, wrapped my list in a transition-group and it all worked sweet. Until I fetch new data from the server. Now because of the introduction of transition-group for a split second the old data and the new data live together in the DOM causing the expansion of the list and pushing subsequent div down and back up.
This is kind of expected per the docs:
the DOM operations for insertion and/or removal will be executed
immediately on next frame (Note: this is a browser animation frame,
different from Vue’s concept of nextTick).
Regardless of being able to drag and drop the element, if we were to fade in/fade out the new/old elements they will co-habitate for the time of the animation, which is not great as seen in this pen
Anyway to fade out, change the data, then fade in the new one, while maintaining the height of the list?
Note that without fade the problem is still obvious:
Pen of my issue: click the switch data button to see the issue.
Turns out it's pretty know issue. By reading through this thread and toying with this example, i was able to achieve something to my liking by using:
list-leave-active {
display: none;
}
Resulting Pen
A css fix may be to wrap the contents within a box of some height and set overflow hidden.
So, even when new elements co-exist the jump in scrollbar can be avoided.
I have a site where I use TimelineLite paused and manually progress the timeline with a scrollbar.
I also have 5 pauses littered throughout the timeline so that I can click a button and watch one 'scene' of the timeline.
Each animation scene basically tweens offscreen at the top while the next element tweens into the screen from the bottom.
Everything works fine.
However when I resize the browser, I notice that the tweens of the timeline are still animating from the old values.
My timeline consists of TweenLite.to(...) tweens. For example if my browser height is 700 pixels and I tween scene 1 out of view and scene 2 into view, when I resize and use timeline.reverse();, I see scene 2 tween back to 700 pixels. (Scene 2 is absolutely positioned with translateY set to 100%) However since my tween is using y: '100%' I would expect it to reverse to 100% not this old pre resize value of 700 pixels.
Oddly enough, scene 1, which was originally at 0,0 and tweened to 0,-100%, still tweens to a percent value so that one looks ok.
So I find it really odd that scene 2 is tweening in pixels when I set a percent value and scene 1 tweens in percent.
Whats going on and how do I prevent this pixel value from caching in my tween?
I've already tried invalidate(), kill(), clear() and then setting the timeline to null, followed by reinserting new tweens on a new timeline but somehow those tween values still exist.
I'm at a loss. Any help would be greatly appreciated.
I think what you should be using is yPercent for animating your tweens instead of absolute pixel values or instead of simply animating the y property.
What yPercent (and xPercent) do is that they will always align your element regardless on the screen size, hence responsive, based on the value that you provide.
Here is an example made by the GSAP guys themselves which, by the looks of it and by what I was able to understand from your question, is actually very close to your own situation as well.
There is also a video tutorial by Petr Tichy who explains the differences between using x and xPercent.
P.S. Can you share this website you are working on or, prepare a fiddle or a codepen isolating the problem? This would help us in proposing an accurate solution.
Answering my own question since no correct answer exists. GSAP saves any tween data on the actual DOM element. Despite me setting the timeline or tweens to null, it had no effect because as I was tweening the same element, it would check the DOM element if it had the variables GSAP had saved prior.
To fix this I had to manually reset the DOM element variable.
If this is a problem for you, check the ._gsTransform variable on the element. You will see some x, y values that you can manually set to 0 or whatever else you need to set it to.
When a user presses a button i add a scale transform to make it zoom out like safari's tabbing. when user presses the webview it comes back up. When the view is rotated, i use to get the values of how i wanted the frame to look like in tab mode, and checked if it was in tab mode when rotating and applied the frame. it works, and ive tried taking it out. The issue is, if i rotate like 10 times, a black line on the right side gets bigger and bigger going inside the webview. i have logged tons of objects for the web view and its scrollview to see if anything is off, the scrollinset/offset is correct, the frame is correct, the transform is correct too. i cant figure out why theres the black line. i tried refreshing the webview to see if its the webpage, and it doesnt fix that ether,the scale transform values is
CGAffineTransformMakeScale(0.6, 0.68)
for zoom out, and 1, 1 for zoom in. if anyone wants to see the effect just apply that to a uiwebview and start rotating the device about 10 times and you would then really see it.
heres how the web view looks when rotating a bunch of times:
on the right side theres that thick black line, it gets bigger with every rotate but ONLY grows when that transform is added, if its normal size again it stops but stays there.
When you transform any view, their frames do change, If you are using autoresize flag, check it since transforming changes frames and autoresizing also changes frames and this creates weird result.
Initially I was under the impression that it uses the table row slideup/down animations while inserting/deleting new rows but I doubt if it's doing that as it does it so fluidly even with thousands of items in the list (otherwise it would take a lot of time for the deletions/insertions to work).
Am I right in my assumption that it's simply attaching a new instance of the News list at the bottom of the screen, shrinking the above one while the one at the bottom expands to fill up space?
UPDATE:
Please see this video of what I mean: http://dl.dropbox.com/u/4960327/ReederAnim.mov
I can not tell you exactly how Silvio Rizzi made this, but as you see in the playback, a list view is added behind the shown list view, and the front list view fades out (.alpha = 0.0;) while the list view behind it expands its height per row.
When you desicate it frame by frame it becomes quite clear what he does, and it is really not that advanced. But I have to admit, with the white "milky" polished interface, it looks quite neat.
In addition, you can see that while animating, the background list view only renders the top 7 entries (hopefully calculated by dividing the view height with the average height of the cells shown) making the list view quick to load. Then afterwards, he can load an extended array of cells once you start scrolling, or in a background thread starting once the animation is complete.
I'm trying to make an animation effect similar to the one on Safari(iPhone) when you add an element to the reading list. It's similar to the one that appears when starting to download an item from App Store application: the application item drops to the dock to start downloading.
First it bounces up and then goes to the dock. It's a very nice effect that Apple uses on their OS.
I have an image view on screen that I want to drop with this kind of animation to my toolbar in my application.
If there is someone who did it or know what's the name of the effect, could please tell me how to do it.
Thank you.
"Add to reading list" shows no animation on my phone but of your description it sounds like the "Open in background"-animation in Safari (iPhone). My answer describes that animation.
I wrote a thing like that a few months ago and much of it is doable while some of it is not. Your questions showed me that more people are to know how it is done so I wrote a blog post about it. I will describe the high level approach and challenges here but you can read more about it in that post.
Getting to content to animate
If you choose to animate the view that is on screen down to the (in your case) tool bar then you will only have to access its layer. If you want the original view to remain and animate a visual copy (like the "open in background"-Safari animation) down to the bar item then you should create a new layer and draw the content of your layer into an image and set that image as the content of the layer that you are animating
Calculating the end position
The start position of the animation is simply the frame of the view. The end position is very tricky since bar items (both tool bar items and tab bar items) are not UIView subclasses and doesn't have a public view property. This causes problems when you want to shake the bar item later on.
I decided to make a visual approximation of the end position using some simple heuristics. If you know before hand that you will only animate to a single bar item then the end position can be hard coded to a suitable frame.
Animating along a path
There is nothing special to moving, scaling and rotating the layer from the start to the end position. If you want to read more about how I did it you can look at the post I wrote.
Shaking the bar item
This cannot be done without a lot of custom code or using private API at the moment. Since bar items doesn't have a view or a layer there is no accessible layer for you to animate. I guess that you could have a custom animating image that does the shake and set that during the animation and set the new image afterwards. The approach of drawing into an image and animating that doesn't work that well either since there is no accessible layer who can draw its content into the image (you want this for the special effect of the tool bar item and tab bar item).
...put all this together and tweak it to your special needs and you will have an animation that resembles the animation you are looking for.