DD77
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by DD77
-
I need a click event on (section-2) which will do the following: - Page body changes background colour (adding class="darkerblue").- The main element (clickable) to move across x:500, scale:1.5. - if I click the main element it will revert all. -If I scrollback to previous scene(section-1) it will revert all. From line 93, where I started making the scene for section-2
-
@Dipscom thanks for this. I know how flexbox works but still like you say doesn't fix the issues. I need to set a width somehow. COuld yu please help?
-
have a look at line 48 please, any good?
-
@Sahil almost there, as the image on the right should scroll to the left on section one, the image on section2 should move to the center once is animated. perhaps the .setTween(".title", {x: "28.5%", scale: 1, ease: Linear.easeNone}) has to change???
-
Not sure why the image on section-2 doesn't center on scroll. I tried everything so far. It should appear from section-1, so with the offset, starts animating . What I'm I missing here? on leave should go back at the start on the left. new ScrollMagic.Scene({triggerElement: "#section-2",offset: -350, duration: $('#section-2').outerWidth(true)}) .on("enter", function(){ $("#anchor2").addClass('selected'); $("#section-2").addClass('animated fadeInUp'); var tl = new TimelineLite(); tl.to("#section-2.fadeInUp .animated-items", 1, { x: getMidX("#section-2.fadeInUp .animated-items")+20 } ); function getMidX( obj ){ return ( $(obj).parent().width()/2 ) - $(obj).width()/2; } }) .on("leave", function(){ $("#anchor2").removeClass('selected'); $("#section-2").removeClass('animated fadeInUp'); tl.to("#section-2.fadeInUp .animated-items", 1, { x: getMidX("#section-2.fadeInUp .animated-items")+20 } ); function getMidX( obj ){ return ( $(obj).parent().width()/2 ) - $(obj).width()/2; } }) .addTo(controller);
-
I'm trying to build a project where I will be using different scenes and Tweens. Firstly I'd like to fix the centering on my image. the image onscroll should move to the right. For some reason is not centered even though all the css are correct. what's the best way to set multiple scenes on the project?
-
@sahil thanks, this is much better, I've now added a bit of interaction to the sections, so for each scene we have some classes to the specific containers. I'm also going to add some parallax once all works, I was thinking to add something like this, not quite sure is the best way possible. Could you help to implement a parallax function? So I can use it around the sections?
-
@Sahil do you know how do achieve this also with the mouse only? like if I scroll with the mouse the links change?
-
Not sure I'm doing the right thing here but I need the navigation to scroll horizontally. Also links should be active when the page scrolls... What am I missing here?
-
@Dipscom hi, thanks for coming back. look at this. Would be nice to hear your thoughts
-
@Jonathan thanks for all! this is what I managed to do after your massive help. What do you think???
-
@Jonathan firstly thank you for this! All makes sense now. So glad you helped me out here. One last think to ask you. Is it possible to toggle only one element and un toggle the others? So I can view just one ?
-
@jonathan thanks for all your help. I put together something similar, but still I can't make it working at I want. Could you please help?
-
@Jonathan ok, I'll try to reduce it.
-
@Jonathan of course I did. Unfortunately my logic is quite difficult to run another click event with a reverse option. I think the solution is nearly there as the second click (close) works but it doesn't collapse.
-
@Jonathan I'm nearly there, I think the issue here is the height of the hidden container, gsap is animating without understanding the height of the hidden children. would be amazing if you could help here
-
The animation is not like I want, it should have a typical collapsing expanding experience. If you click the "Expand/collapse", you'll expand/collapse the content. It doesn't have the expected animation of the height when is scaling , when I click close (X) it shold do the reversing animation. Content should be pushed. console.log('click 1'); TweenMax.fromTo(".Tile.is-expanded .Tile-flyout", 0.8, { scaleY:0 ,transformOrigin:"center top", autoAlpha:0, ease: Linear.easeNone }, {scaleY:1, autoAlpha:1,}); TweenMax.fromTo(".Tile.is-expanded .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,}); console.log('click 2'); TweenMax.fromTo(".Tile .Tile-flyout", 0.8, { scaleY:1 ,transformOrigin:"center bottom", autoAlpha:1, ease: Linear.easeNone }, {scaleY:0, autoAlpha:0,}); TweenMax.fromTo(".Tile .Tile-flyout > *", 0.8, { scaleY:2,transformOrigin:"center bottom", ease: Linear.easeNone }, {scaleY:1,}); Demo:
-
@Dipscom thank you so much all make so much sense except when you talking about the universe:-) I have this now, really close to the expected behaviour, just on the first click the content .Tile-flyout jumps down. Any idea why?
-
I'm trying to expand the content using GSAP, so I can have the height animated of the hidden content. If you click the "Sterilisers" button/product, you expanding the content. I applied GSAP but with not the expected result. Please advice what's the best way. $('.js-tile').richTile().on({ 'expanded.RichTile': function(event, tile) { // disable siblings on expand var siblings = tile.element.siblings('.js-tile'); siblings.richTile('enable'); siblings.richTile('collapse'); var currentTile = $(this); var $tiles = $('.js-tile'); $tiles.not(currentTile).addClass('not-expanded'); console.log('click 1'); TweenMax.from(".Tile.is-expanded .Tile-flyout", 0.8, { height:0 , opacity: 0, autoAlpha:0, ease: Power1.easeOut }); // re-enable when this tile is collapsed tile.element.one('collapsed.RichTile', function() { siblings.richTile('enable'); $tiles.not(currentTile).removeClass('not-expanded'); console.log('click 2'); TweenMax.from(".Tile-flyout", 0.8, { height: 0, opacity: 0, autoAlpha:1, ease: Power1.easeOut }); }); } });
-
@Jonathan hi, yes, sorry I modified the code and deleted it . $('.js-tile').richTile().on({ 'expanded.RichTile': function(event, tile) { // disable siblings on expand var siblings = tile.element.siblings('.js-tile'); siblings.richTile('disable'); console.log('click 1'); TweenMax.from(".Tile.is-expanded .Tile-flyout", 0.8, { height:0 , opacity: 0, autoAlpha:0, ease: Power1.easeOut }); // re-enable when this tile is collapsed tile.element.one('collapsed.RichTile', function() { siblings.richTile('enable'); console.log('click 2'); TweenMax.from(".Tile-flyout", 0.8, { height: 0, opacity: 0, autoAlpha:1, ease: Power1.easeOut }); }); } }); doesn't work at all
-
Please I need to advise on fixing this animation. I choose Gsap due to its amazing speed and smoothness and I'd like some expertise to fix my animation. Please click on product Sterilisers, it should expand the container pushing the content below down, like an accordion.
-
I'm trying to have the expanded container on a full width. I was wondering if there's a way with GSAP. My full-width container once active should expand full width. Bu also should push the content below. So it can't be positioned absolutely. Please click any product, the expanded content should be full width, max-width:1200px. Any what I can Achieve it in GSAP?
-
Could you fork it please?
-
@Sahil thanks I created a new pen and I added a new button function that I play and reverse but doesn't work on click. could you please check?
-
Is working quite ok, the only requirement is making the buttons to animate with GSAP instead than css. On click I should make the button active with width and height 96px. By default the first element should be always active. I put together this code (is not on the demo ) which is not working fine. $(".app-promo-img-align:first").addClass("active"); TweenLite.to('.app-promo-img-align.active a', 0.4, {width:'96px', height:'96px'}) var button = $('.app-promo-images').find('.app-promo-img-align') button.onclick = function(e) { e.preventDefault; $(this).addClass("active"); $('.app-promo-img-align.active').removeClass("active"); if ($(button).hasClass('active')) { TweenLite.to('.app-promo-img-align.active a', .5, {width:'96px', height:'96px', ease: Power3.easeOut }) } else{ TweenLite.to('.app-promo-img-align a', .5, {width:'80px', height:'80px', ease: Power3.easeOut }) } }
