On Click Scale Image to Full Screen

[Rakesh Roy 2 Likes (Newbie)]

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

[Shaun Gorneau 1,503 Likes (Superhero)]

Hi @Rakesh Roy, you'll want to do a few things to set this up to make it appear seamless.

 

1. Preload the full screen image and a bit of the "click through" content

2. Animate to the full screen state along with displaying the top of page content (already on the page)

3. AJAX to fetch the "click through" URL's content (or the content of a specific element at the target URL)

4. Load that content into a container to and hide the current page's main content container

5. Replace the current window.location ( history.pushState() )

 

This pen demonstrates a method for going from a tile to a full screen image ... in this particular case it's full width, but the principles are the same.

 

See the Pen JLKbBm by sgorneau (@sgorneau) on CodePen

 

Hope this helps!

[Rakesh Roy 2 Likes (Newbie)]

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.