[Element go to middle screen and Scale to 100(vw/vh)]

@Noturnoo Thanks 

 

You Saved My Life

[On Click Scale Image to Full Screen]

Thanks @Shaun Gorneau for quick reply and live example. Though i am having some different issue.   

 

 

Scenario: A grid full of portfolio images with link to their own page. which will lead  to their page by Barbajs functionality. 

What I want:  When any portfolio image clicked the image must scale from the current position* and then easeOut**  when the new content loaded in background using barbajs .

Issue: When i scale the image the position is not suitable and effect is not good.

 

* position :  Image must scale from the current position not Example Start   to Example Processing  to Full Screen image with center Position

** I will code the barbajs part just need the animation part

 

 

 

If you give me some example how i can archive  this animation. 

Example site : https://antoni.de/cases/    (If you scroll the slider and the click on the most right or left video , you can see the video scale from the current position of the element)

 

Thanks.

 

 

[On Click Scale Image to Full Screen]

Hi this is my website http://gallarii.appycodes.com/portfolio  

 

I wan to built the effect like this example site: https://antoni.de/cases/ 

When user clicks on the thumb image the image must scale to full page and then load new page

 

can you give me hint how to proceed.

 

 

 

My js file :  http://gallarii.appycodes.com/wp-content/themes/generatepress/bbc-working.js?ver=4.9.8

 

    var PortFolioTransition = Barba.BaseTransition.extend({
    start: function() {
      this.originalThumb = lastElementClicked;

      Promise
        .all([this.newContainerLoading, this.enlargeThumb()])
        .then(this.showNewPage.bind(this));
    },

    enlargeThumb: function() {
      var deferred = Barba.Utils.deferred();
      var thumbPosition = this.originalThumb.getBoundingClientRect();

      // this.cloneThumb = this.originalThumb.cloneNode(true);
      // this.cloneThumb.style.position = 'absolute';
      // this.cloneThumb.style.top = thumbPosition.top + 'px';

      // this.oldContainer.appendChild(this.cloneThumb);
      var image = $(this.originalThumb).find("img");

      var tl = new TimelineLite({onComplete:deferred.resolve()});


      tl
      .timeScale(0.2)
      .set(image ,  {
        autoAlpha: 1,
        "z-index":"9999999"
      })
      .fromTo(image,1, 

               {
                scale: 1,
                
                }, {
                scale:5,
                
                top:0
                })  

     return deferred.promise;
    },

    showNewPage: function() {
     var TTLite = new TimelineLite({
                onCompleteScope: this,
                onComplete: function() {
                   this.done() , afterDomReloaded()
                }
            });



             TTLite.set([this.oldContainer, this.newContainer], {
                 position: "absolute",
                top: 0,
                 left: 0,
                width: "100%"
            }).set(this.oldContainer, {
                autoAlpha: 0
             }).set(this.newContainer, {
                 autoAlpha: 1
             }).set(this.newContainer, {
                 clearProps: "position, top, left, width"
             })
    }
  });

 

 

Please help me if , Thanks or give me some info how to start

[Page Transition with Barbajs]

On 8/22/2018 at 12:41 PM, Sahil said:

Here is basic demo of how you can do that effect. You need a fixed element that will cover all the page content.

 

See the Pen jvEeBq?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

As for explanation, everything is pretty well documented there. http://barbajs.org/how-it-works.html

Thanks, your code clear all my doubts. Its fun using greensock.

[Page Transition with Barbajs]

Hi All,

I am new to js animation, can someone explain me how the nav transition works on http://magacom.fr  ,

i want to make the effect with barbajs and #GSAP .

 

Can Someone help with some code example.