Jump to content
Search Community

On Click Scale Image to Full Screen

Rakesh Roy test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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.

 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...