I've been trying to accomplish this for like two weeks now. Does anyone here have any idea of how do this? I won't even paste my code because it's the worst ever.
Thanks.
Have you check fullpage.js?
You might be able to get the same scrolling effect by creating your own CSS3 function with the CSS Easing Animation Tool of Matthew Lein.
Then pass it to the parameter easingcss3 of fullPage.js.
easingcss3: 'cubic-bezier(1.000, 0.000, 0.000, 1.005) 0.5s',
Or, if you prefer, you can go for jQuery easing effects and use css3:false. (although it will be smoother with css3)
Regarding the elements dissappearing on scroll, you'll have to do it by yourself by animating them on a callback such as onLeave or by using the classes added to the body as in this example.
body.fp-viewing-page2-slide1 #section1 .moveOut{
transform: translate3d(0, -400px, 0);
}
Something in this line.
Related
I want to use enter/leave transitions in vue.js, using the built in javascript hooks for transitions:
https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
My animation library of choice is GSAP: https://greensock.com/
Both, my enter function enter: function(el, done) {} and my leave function leave: function(el, done) {} are called correctly.
The enter animation works just fine — but the leave animation doesn't do anything.
I guess it is a GSAP related thing I do not understand yet. I tried resetting the animation and clearing the inline styles of the animated element. Didn't help.
Here is the codepen:
https://codepen.io/Sixl/pen/oGwOKW?editors=0011
Here's a fixed version: https://codepen.io/GreenSock/pen/veJGmR?editors=0010
I noticed a few problems:
You were calling done() immediately instead of waiting for the animation to complete. I just moved it to an onComplete callback.
You created a single timeline that you were adding all your animations to, but that isn't very appropriate in this case because it's not a linear thing - the clicks could happen anytime. So the playhead on the timeline reaches the end of the first animation, and then when you place a new one at the end (much later, when someone clicks), the playhead would already be way past that spot where you're placing it, causing it to jump to the end on the next render (appropriately). It's cleaner to simply use a TweenMax here instead. Or you could create a new TimelineLite each time there's a click (don't worry - it's fast).
--
TweenMax.to(el, 0.5, {
x: 150,
autoAlpha: 0,
scale: 0.5,
onComplete: done
});
If you have any more questions, don't hesitate to swing by the GreenSock forums. https://greensock.com/forums/ where there's a great community focused on helping people with GSAP questions.
Happy tweening!
I'll try and keep it concise.
I am required to utilise the draggable plugin for GSAP in my project. The plugin is great and works really well. I think my issue is just something I'm not quite grasping.
Codepen:
https://codepen.io/mhcdotcom/pen/dzyNmB
Dragging the #stage element allows the click and drag functionality.
The .inner element extends out of the container div so I use overflow:hidden on the stage element.
When I do this, the portion of the .inner elements that extend past the viewable area don't come in to frame and seem to be cut off.
Is there a way around this in GSAP? What am I missing?
I have googled to no avail.
Any help is much appreciated.
Thank you
Moe
"All" draggable does is add a transition to the element that is dragging, so any overflows etc will still be honoured.
I can't be 100% sure what you are trying to achieve, but you can add classes on dragStart/dragEnd that means you should be able to get the behaviour you need.
I have forked a codepen giving you a basic example.
onDragStart: function() {
stage.classList.add('dragging');
},
onDragEnd: function() {
stage.classList.remove('dragging');
}
https://codepen.io/motionimaging/pen/xLxLpG
I’m trying to create a looping fade in/out effect for an image. It’s working in Chrome, but it doesn’t work in Firefox.
Here’s the code: http://jsfiddle.net/FTLJA/254/
(I did make it work with jQuery but that made the browser slow and flickery on Android phones, so I’m trying CSS instead.)
Thanks for any help.
Update: fixed.. please check the link again
Well, if ypu're only setting the WebKit properties (only #-webkit-keyframes and only -webkit-animation-...), then of course it will work only in WebKit and not in Firefox - add them with -moz prefix as well. Also remove the quotes around 'blink' to leave it just... blink and it works http://jsfiddle.net/FTLJA/261/
Ah yes — this shows a difference between CSS transitions and CSS animations.
CSS animations run once you’ve applied -webkit-animation-name to an element, i.e. they can run entirely from CSS.
Transitions, on the other hand, only run when you change the CSS property that they apply to. You can either do this via CSS pseudo-classes like :hover, or via JavaScript.
So, in order to make your transition work in browsers that don’t support -webkit-animation, you’ll need to run some JavaScript that changes the opacity of the image once a second — setInterval is your friend here.
(Note that your JavaScript won’t carry out the animation, it’ll just switch opacity straight from 1 to 0 and back again every second. The CSS transition will animate this change for you.)
I have been looking around to see css3 animations have some kind of callback, I.e is possible to animate an element, and once the element is finished animating, animate another?
Been bashing around google for hours to no avail, maybe my terminology is wrong?
CSS3 animations are not meant to replace JavaScript.
CSS is made purely for styling purposes with very minimal logic that does not "look back" (you cannot select a parent). CSS is handled on the spot and is triggered using a few browser triggers like :hover, :active, and :link.
CSS is supposed to be lightning fast, as it has no confusing or time-consuming logic that will slow down the browser.
That being said, callbacks aren't supported for the above reasons.
Take a Look at Apple's talk "CSS Effects, Part 2: Galleries and 3D Effects from WWDC 2010":
https://developer.apple.com/videos/archive/
You can provide a startdelay for your animation and there is some kind of transitionEndListener for webkit-based browser.
Does anyone know how to use the Pixastic plugin and jQuery to where I could have an image fade from color to completely desaturated?
I am trying to avoid saving out two images and fading one out..
i did the inverse... having desaturated images fade in to color. achieved w/ only 1 image in conjuction w/ pixastic and livequery. i basically cloned the images, desaturated one of the copies, and stacked them on top of each other.... fading the top (desaturated) layer out on hover. i'm sure it could be more elegant, but it mostly works. you can see the effect at chicagointerhandball.org on all the "sponsor" logos
$('.sponsors').load(function() {
$('.sponsors').pixastic("desaturate");
}).each(function(index) {
var clone = $(this).clone().removeClass('sponsors').addClass('sponsors-color').css('opacity',.25);
$(this).parent().append(clone);
});
$('.sponsors-color').livequery(function(){
// use the helper function hover to bind a mouseover and mouseout event
$(this).hover(function() {
$(this).stop().animate({"opacity": 1});
}, function() {
$(this).stop().animate({"opacity": 0});
});
}, function() {
// unbind the mouseover and mouseout events
$(this)
.unbind('mouseover')
.unbind('mouseout');
});
Since all those pixastic image effects are generated on the fly I don't think it would be feasible to fade between saturated and desaturated. The saturation level of the image would have to be redrawn at each step of the fade. Your best bet would probably be to have two images, one saturated and one desaturated, and have them placed on top of one another. Then when you hover over one, fade in the other image.
Edit:
Just saw that you were trying to avoid having two images. Well, that's the only solution I can think of but I'd love to see if there were others. Depending on how many images there are, you could generate all the desaturated images on page load, place them on top of saturated images, hide them, and then fade them in on hover. Just a possibility.
you could get the best of both worlds by dynamically creating a duplication and desaturating that image with pixastic. Position the new desaturated image under the original and fade the original out.
You should be able to, it is in their jQuery documentation section.
// convert all images with class="photo" to greyscale
$(".photo").pixastic("desaturate");
Looks like this is possible with the canvas element.
With this you need to mix jQuery and the standard DOM calls. I was having the same issue just today about this. I couldn't get the hover to work cross platform from the examples given here and on their site. So I decided to think for myself on this one. Came up with a solution, hope it works for you:
http://you.arenot.me/2012/03/26/pixastic-desaturate-on-mouseover-mouseenter-mouseleave/