I have an svg, and I want four of the elements to pop up in place. I am trying this with gsap but they look like they are flying into place. Here's the code I am using for this
gsap.fromTo(
'#ide, #html, #handlebar, #search',
1.5,
{
scale: 0,
},
{
scale: 1,
yoyo: true,
ease: 'none',
repeat: -1,
}
);
Please also check the codepen for current working version: https://codepen.io/prateekkarki/pen/oNxEZxo
I don't want them flying from right, I just want them to scale up from their original position. How can I achieve this in GSAP, please help.
Just remove your CSS that's affecting the transforms:
#ide, #html, #handlebar, #search {
transform-origin: top center;
transform-box: fill-box;
}
Demo.
FYI you're more likely to get a faster response on the GSAP forums.
Related
I was wondering if there is a way of making a web animation go step by step using the web animation API without having to manually declare offsets for the start and end of each frame. Obviously you can do this in CSS animations.
This is for animating sprite sheets.
Yes, you can use the same approach as in CSS animations. That is, you can specify a timing function using the easing property. Unlike CSS animations you can either apply this to the whole animation or between individual keyframes.
To apply it to the whole animation you can use:
elem.animate(/* ...keyframes ...*/, { duration: 1000, easing: 'steps(5)' });
Alternatively, to apply to individual keyframes you can use one of the following approaches:
// Keyframe array syntax
div.animate(
[
{ opacity: 0, easing: 'steps(2)' },
{ opacity: 0.5, offset: 0.8, easing: 'steps(3)' },
{ opacity: 1 },
],
{
duration: 1000,
}
);
// Object syntax
div.animate(
{
opacity: [0, 0.5, 1],
offset: [0, 0.8, 1],
easing: ['steps(2)', 'steps(3)'],
},
{
duration: 1000,
}
);
Note that CSS animations can only do easing between keyframes. It cannot do easing across the whole animation.
Also, note that when applied to keyframes, the easing is used from the keyframe it is added to until the next keyframe. As a result, it is not necessary to add easing to the last keyframe.
If you are animating sprite sheets, you might find the jump-none keyword useful. It is supported by Firefox and Chrome. For example, use steps(5, jump-none) to see all five frames.
Holla, I need to reset the animation when I close menu and open it again. How can I do that? Animation works only the first time when I open menu.
CSSPlugin.defaultTransformPerspective = 600;
TweenMax.staggerFrom('ul#menu li', 1.5, {rotationX:-90, transformOrigin:"50% 0%", ease:Elastic.easeOut}, 0.4);
Here is the code: http://codepen.io/hafsadanguir/pen/qOdaab.
Thanks for help!
Is this the kind of result you were after?
JavaScript:
CSSPlugin.defaultTransformPerspective = 600;
var toggleMenu = $('.menu-toggle');
var logo = $('#logo');
var logotitle = $('#logotitle');
var listItems = $('ul#menu li');
var timeline = new TimelineMax({ paused: true, reversed: true });
timeline.fromTo([logo, logotitle], 0.6, { top: 300 }, { top: -50, ease: Power2.easeInOut });
timeline.staggerFromTo(listItems, 1.2, { autoAlpha: 0, rotationX: -90, transformOrigin: '50% 0%' }, { autoAlpha: 1, rotationX: 0, ease: Elastic.easeOut.config(1, 0.3) }, 0.1, 0.3);
toggleMenu.on('click', function() {
$(this).toggleClass('on');
timeline.reversed() ? timeline.play() : timeline.reverse();
});
A few things have changed so here are the details:
First and foremost, I didn't see the need for the hidden class so I have removed it from my solution.
Plus, the on class toggled on the .menu-section element seemed pretty unnecessary as well. I removed it, but kept the properties defined on the .menu-section CSS rule.
On to the fun part, the JavaScript.
You basically needed a TimelineMax to operate upon.
Judging by the imports you had in the JavaScript settings panel, I am assuming that you have some idea of what TimelineMax (and TimelineLite) are all about. By in any case, TimelineLite is about building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances and TimelineMax is an extension of TimelineLite, adding more power to it.
So, what happens in the code is that a TimelineMax instance has been initialised, tweens have been added to it and then, upon clicking of the .menu-toggle button element, this timeline is either played or reversed.
The line timeline.reversed() ? timeline.play() : timeline.reverse(); is basically a shortened, fancy version of an if condition and it comes to down to personal preference more than anything else, no performance gain or anything that I am aware of. In a normal if clause, it would have been written like this:
if (timeline.reversed()) { timeline.play(); } else { timeline.reverse(); }.
The condition that is being checked is .reversed() property of timeline. You would notice that while initialising new TimelineMax(...), I set reversed: true property on it. What it does is that after all the tweens are added to timeline, it would behave as if timeline was immediately reversed such that the orientation of the timeline had been flipped. Read more about it in the TimelineMax documentation link I shared above.
The .play() and .reverse() methods are pretty self-explanatory as they make the timeline go forwards or backwards respectively.
That is about it.
Hope this helps.
I wanted to add animations to my app on page enter, and hooked with the default WinJS.UI.Animation.enterPage(element), and that worked fine sliding in the element from right to left.
I need to slide it from bottom (100px) to top. Once I overrode the default values with WinJS.UI.Animation.enterPage(element, { top: "100px", left: "0px" }) I saw no animation at all on my screen which is weird.
However when coupled with WinJS.UI.Animation.exitPage(oldElement), the animation seemed to work but I wanted to further tweak the timing.
following as per https://msdn.microsoft.com/en-us/library/windows/apps/Dn127042(v=win.10).aspx#creating_custom_animations, didn't help. After using the example from "Combining custom animations and transitions" in the link, I could see only the opacity changing and the element fading in, however no translation at all. I tried the same pairing with WinJS.UI.Animation.exitPage(), and adding my own customExitPage - basically using from WinJS, and with just opacity... and nothing just works.
I was referring to some of the animation implementations from here as well -
https://github.com/winjs/winjs/blob/ad8691b3d5227ff1576a5d2a90a42f022498d2a9/src/js/WinJS/Animations.js, to get control over the timing.
Anyone else having this issue? or am I doing something wrong... or is it WinJS behaving bad?
EDIT:
weirdly enough the "to top" animation with enterPage(element, {top: "100px", left: "0px"}) started working. However the custom animation still remains elusive.
well, I was able to finally figure out the "weird behavior". The #keyframes should have been set in CSS, and I was trying a few other things and apparently that's the reason that it didn't work.
However, I would probably say the explanation could have been a little more clearer in the site as well.
when we are already providing the from - to values in the javascript, I would otherwise about providing the same again as part of CSS too which is still weird.
Like mentioned in the site,
add this to css: #keyframes custom-translate-in { from { transform: translateY(50px); } to { transform: none; } }
and have this in js:
function runCustomShowStoryboard() {
return WinJS.UI.executeAnimation(
target,
{
keyframe: "custom-translate-in",
property: "transform",
delay: 0,
duration: 367,
timing: "cubic-bezier(0.1, 0.9, 0.2, 1)",
from: "translate(50px)",
to: "none"
});
}
Never was able to figure out why and how the "bottom to top" animation started working (probably restarting visual studio helped)
My goal is to make an effect similar to apple coverflow for divs using jQuery. There's a really great clone called CoffeeFlow but it's slightly different than what I'm looking for.
What I'm looking for is more like looking at a closet full of clothes. All of the divs are turned almost 90deg so you can barely see them. As you mouse over they rotate and straighten out so you can see them, and as you unhover, they glide back into place.
I'm using the jQuery plugin transit to help achieve this. I have a jsFiddle that almost achieves what I want, but something seems off. It appears to stretch in and out rather than rotate. There may be other things wrong as well but this is what is most apparent to me right now.
The jsFiddle
$(document).ready(function () {
$('.boxxe').hover(
function () {
$(this).stop();
$(this).transition({
rotateY: '0deg',
zIndex: '2',
background: '#afa',
scale: 1.1
}, 400);
},
function () {
$(this).stop();
$(this).transition({
rotateY: '60deg',
zIndex: '-1',
background: '#FFF',
scale: 1
}, 400);
});
});
EDIT: It looks like one of my biggest problems is my perspective in my css doesn't work. It works if I apply perspective to my transition function (as you can see by the demo), but not in my css file.
jsFiddle with solution
I'm not very familiar with css transform but using the dev tools I inspected the css after jquery transit executed mouseout and replaced your transform and perspective css with that and it looks like it works:
transform: perspective(500px) rotateY(60deg) scale3d(1,1,1);
-webkit-transform: perspective(500px) rotateY(60deg) scale3d(1,1,1);
http://jsfiddle.net/bbird/Whqv7/
For example - http://www.tumblr.com
Log out and try to click buttons "Log In", "Sign up", "30 reasons why you'll love Tumblr" (especially interesting).
How to create this slide effect?
P.S: i'm not asking for provide me working code, just guidelines and advices.
UP: seems like i found the possible solution. Code from tumblr js files.
return new Effect.Move(element, {
x: initialMoveX,
y: initialMoveY,
duration: 0.01,
beforeSetup: function(effect) {
effect.element.hide().makeClipping().makePositioned();
},
afterFinishInternal: function(effect) {
new Effect.Parallel(
[ new Effect.Opacity(effect.element, { sync: true, to: 1.0, from: 0.0, transition: options.opacityTransition }),
new Effect.Move(effect.element, { x: moveX, y: moveY, sync: true, transition: options.moveTransition }),
new Effect.Scale(effect.element, 100, {
scaleMode: { originalHeight: dims.height, originalWidth: dims.width },
sync: true, scaleFrom: window.opera ? 1 : 0, transition: options.scaleTransition, restoreAfterFinish: true})
], Object.extend({
beforeSetup: function(effect) {
effect.effects[0].element.setStyle({height: '0px'}).show();
},
afterFinishInternal: function(effect) {
effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle);
}
}, options)
);
}
You'll find a working demo of a full-page slide here: http://acarna.com/full-page-slide.php
View the source and the CSS as both are requird for this to work. The main keys to note are...
You need a container in which 2 (or more) screen-sized pages are held (#wrapper in my demo)
This container needs to have its overflow property set to hidden
You must detect the screen height each time you run the animation (in case the window size has changed)
Have you check out the scripts and css they have used in their pages?
just check it out you will get the clue how to do it.
I made this effect on my own site too. I don't know how tumblr did that, but I have figured out my own way to do this(for tumblr's effect as an example):
step 1. before redirect to a new url, slide the bottom section up of current page
step 2. slide down the top section when the new url document.ready
Update years later:
Since I just got a new vote-up, I discovered this old answer which is now a little bit outdated.
With modern javascript, you just need to use history.pushstate, all effects are performed in one page. After changing the page content with js, you can use pushstate to change the url, which makes it like navigating with effects.
To read more about pushstate, please refer https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history