DD77
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by DD77
-
@OSUblake thanks, that's brilliant. I'm fine with one child/item. I'd like to have this tl.to(child, 1, { y: -180, ease: Linear.easeNone }); on multiple polygons, with different y value. possibly:-)
-
@OSUblake thanks, for your help. I've done something like this. Any thought? multiplier aren't really my best friends..
-
@Carl thanks for your support, as usual really helpful. I saved the pen and now you can see the animation triggered and the GSAP working. Unfortunately it doesn't feel at all parallax. Any thought?
-
I'd like the polygons to be more smooth and the scroll to be more "parallax" feeling. I'd also like the functionality to be a bit more dynamic, possibly. The Polygons, should move smoothly on scroll , appearing on different sizes and positions, perhaps colours. Its all dove in css. If anyone ha an example of code or something that would be great.
-
@Visual-Q @Carl I managed to do something close on what I wanted. If anyone has an Idea on how to improve it please feel free to add comments
-
I'm trying to achieve a smooth transition when the images changes, a blue background should "function as a mask with the images". 1 - text appears, 2- first image appears, 3- blue background ('#foreground') smoothly comes down and up 4- second image appears. I have an example , https://ueno.co/ So to recap, the image before changing a foreground should come down and then up again. I hope someone could help me as I'm stuck.
-
@Shaun Gorneau lovely!! I love golf! I need something simpler, perhaps faiding images with no arrows, just navigation (dots). my one on to works almost fine, just not sure is not smooth
-
@Dipscom I can see the light my fried:-) is there a way we can integrate clickable buttons width active state like mine?
-
@Visual-Q, Dude thanks for taking notice of my post here... What I'm after is a SLIDER, simply a slider in gsap. I build something with a preloader, which is using a imagesloaded plug in. I was trying to incorporate both and make a smooth transition between a loader and the slider.
-
I'm trying to animate all this element on the svg with a bit of sense, so the feet look like the walking:-) I'd like to achieve : - path { they should animate with delay, so I could have the feeling that they are walking. } - line {it's a stroke which should animate from 0 to 100%.} - polygon (are two arrow that should fade.) I hope it's something that you guys could quickly fix.
-
Ok, enough with the bolloking please. I know all the above And I will try my best to remove or improve it. The thing is that if I was that good to make it as you say I was probably able to do it myself without asking for advises or help. I appreciate all your suggestions though.
-
@Dipscom Loader above Slider below
-
@Dipscom HI mate, ok, I broke it down in 2: Demo of GSAP Loader and demo slider alone. Both with no errors.
-
I created this demo which shows a slider with a preloader. The GSAP slider is completely out of sink and doesn't slide on time. How can I load the images and the slider together? It would be nice to have this function working together nicely. Also the fading on the images are a bit glitchy . I might have used to many alphas.
-
@Diaco hi Diaco, I managed to make a video of what I need, would it be possible to make it in gsap this slinky animation? - starts from standing and after one roll stops. Would it be possible? slinky.m4v
-
@Jonathan thanks, yes I've seen it, but not sure I can replicate that with a hover state. Is it possible with gsap? I've seen this from @OSUblake https://codepen.io/osublake/pen/WQyBJb?editors=1010 but still on hover? is it possible?
-
I was wondering if anyone of you had a chace to see this website. I have a project which will require some of those effects. - play button which turns into a overlay? - the effect on the image? - the wave effect on the text? Would be great to see if anyone had a chance to creat or see something like it before? Or so kind to share some demo? http://taotajima.jp/works/itsuka-no-hoshi/
-
Yes, Great work Diaco and lennco! I managed to use it and I managed to make it working with ScrollMagic:-)
-
I'm trying to animate it with scrollMagic, and I'm struggle at the moment...
-
I need to create a animation, I made a slinky demo in css that suit perfectly but is not a gsap build and I need it animated. I'm trying to replicate the same but I'm a bit far away. Could anyone help me to create this slinky animation? It should open up. Slinky demo My demo
-
I have this tween1 that should should work on click and then reverse in case I scroll back. My tween doesn't work, the click doesnt play and so the reverse doesnt work, so: -on click toggle active which will make the f active will have tween1.reverse() //CLICK EVENT ON SECTION 2, AND WHEN SCROLLING BACK TO SECTION 1 IT SHOULD REVERT ALL var tween1 = new TimelineMax(); tween1.to(".click-element", 0.3, {className: "+=active", x: 500, paused: true }, 0) .to('#section-2', 0.3,{className: "+=darkblue", paused: true }, 0) $(".click-element").on("click", function(e) { $(this).toggleClass('active'); tween1.play(); }); var scene1 = new ScrollMagic.Scene({ triggerElement: "#section-2", offset: 50 }) .on("leave", function() { tween1.reverse(); }) .setClassToggle("body", "darkblue") .addTo(controller);
-
@Sahil I appreciate there are roles for the forum, but in this case Gsap is the protagonist here. Specially on this function. I think I didn't explain myself properly. If you look at my demo, the click event should do the animation, and not scrollMagic. So this is GSAP. but yes, I need a to revert the animation once I scroll back, only if the animation is started... Does it make sense? https://codepen.io/davide77/pen/PEqvvX?editors=1010 Thank you for all your help.
-
But on click it should reverse the animation, looks like it jumps. I've added but doesn't work. Also the animation should be triggered only by the click event, is just when I scroll back that is revesing.....:-( $(".click-element").on("click", function(e) { e.preventDefault; console.log('click') $('.click-element').addClass('active'); if($('.click-element').hasClass('active')){ $('.click-element').removeClass('active'); tween1.play(); }else{ $('.click-element').addClass('active') tween1.reverse(); } }); https://codepen.io/davide77/pen/PEqvvX
-
@Sahil thanks, nearly there, that helps a lot. I need it on click, AND if I scroll back animation reverse. is it possible?
-
@Sahil lol sorry I know:-) I'm a bit under pressure as I need to sort this functionality out. I made this so far, but looks like the .click-element is already taking the tween1 . I using alt scrollmagic site but this functionality is a bit tricky. https://codepen.io/davide77/pen/WdvWMd?editors=1010
