Transition smoothly between sections using fullPage.js with clipping path effects

I am looking to create a unique clipping animation utilizing SVG clipping path. The animation should hide the first section while revealing the second section in a smooth transition using fullPage.js.

This idea is somewhat similar to the question discussed here: fullpage JS animation on section

However, I aim to have more control over the animation duration for a seamless transition.

My current knowledge and attempts include:

  1. I plan to utilize FullPage.js onLeave and afterLoad callbacks. By preventing scrolling in the onLeave event and calling silentMoveTo only in the afterLoad event, I hope to achieve my desired effect.
  2. It seems that two sections cannot both be considered active with fullPage.js. As a workaround, I intend to adjust opacity levels between section 1 and section 2 during the animation. Meanwhile, the background clipping path will move accordingly to conceal the section 1 image (SVG).
  3. I experimented with animating the clipping path successfully, but encountered an issue where the content of section 2 was not displayed. Using silentMoveTo to reveal section 2 post-animation did not seem practical, so I am exploring synchronizing it around the midway point of the animation duration.

What would be the best approach for this scenario? I am required to use fullPage.js as per specifications, since it is integrated into the WordPress theme being utilized. My ideal solution involves incorporating a GreenSock javascript library timeline with a callback function at the end of the animation to notify the fullPage.js main object that section #2 should now be active.

UPDATE: For reference, you can explore one method of implementing transitions using GreenSock in this video:

https://youtu.be/gE-Yuu2eEio?t=1694

Nevertheless, this video demonstrates the animation occurring after the second section loads. I aspire to design an animation that simultaneously reveals the contents of the first section while unveiling the second section (note that the Fading Effect fullPage.js extension does not address this specific requirement).

javascripthtmlcsssvgfullpage.js

Answer №1

Looks like it's up to me to provide an answer here.

To put it succinctly, fullPage.js does not allow for displaying two sections simultaneously as per its intended design.

However, you can simulate some form of interaction by having a longer animation in the first section followed quickly by revealing the second section. See below snippet (actual code removed):

        var fullPageOBj = new $('#fullpage').fullpage({
            ...
            onLeave: function (origin, destination, direction) {
            dir = direction;
                    ...
            if(origin == 1 && destination == 2){
                    $.fn.fullpage.setAutoScrolling(false);
                    document.body.style.overflow = "hidden";
                    ...
                    TweenMax.to(bSvg, 2.7, { }, "section1");
                    ...
                }
                $.fn.fullpage && $.fn.fullpage.setLockAnchors && $.fn.fullpage.setLockAnchors('false');
            },
            afterLoad: function (origin, destination) {
                console.log("aL - origin: " + origin + ", destination: " + destination + ", direction: " + dir);
              if(destination == 1){
                    $("vc-section1").addClass("active");
                    ...
                }
                if(destination == 2){
                TweenMax.to(bSvg, 0, { display: "block", onComplete: Delay2, delay: 3.2});            
                function Delay2() {
                  $.fn.fullpage.setAutoScrolling(true);
                $.fn.fullpage.silentMoveTo(2);
                    }
                }
            }
        }

The concept explained above is that the Delay2 function runs after completing an animation in the onLeave event before triggering the afterLoad functions. Timing is adjusted to match the animation duration set in onLeave function.

You may need to adjust timings accordingly. The default transition time between sections in fullPage.js seems to be 700 ms.

Alternatively, consider moving the animation to Section 2 if there are no objects in Section 1 to animate during the transition.

Your thoughts and contributions are welcome in this discussion.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way in jQuery to show each element of an array one at a time with a space in an input field?

I have a large array filled with strings that I want to display one by one in a text field, automatically concatenated with a space bar. Below is my code: <script> x = 0; function abc() { for (i = 0; i < words[x].length; i++) { ...

javascriptjquery

Ways to organize an array based on various characteristics

I am seeking assistance regarding grouping in Javascript. Below is an array where each item has either is_sweet, is_spicy, or is_bitter set to true: const foodsData = [{ name: 'mie aceh', is_sweet: false, is_spicy: true, ...

javascriptarraysfunctional-programminggroupinglodash

Enhancing Angular 4 classes with dependency injection techniques

Currently utilizing angular 4 and angular cli for my project development. I have created some classes that serve as the base for my components! However, as the constructors of these classes grow during development, I find myself in a phase where I need to ...

javascriptangulartypescriptdependency-injection

Enhancing Luxon DateTime with extension type support

Referencing the issue at https://github.com/moment/luxon/issues/260, I am looking to extend the DateTime object as shown below: import { DateTime } from 'luxon'; function fromUnix(tsp?: number): DateTime { return DateTime.fromMillis(tsp * 1000 ...

javascripttypescriptluxon

Step-by-step guide on crafting a scrolling marquee with CSS or Javascript

I am in need of creating two marquees for a website project. The first marquee should showcase a repeating image while the second one should display links, both spanning the browser window at any size. It is crucial that the marquee items are displayed fro ...

javascriptcssmarquee

The Bootstrap slide function encounters issues within the AJAX success callback

Here's the code snippet with a 'slide' event inside an AJAX success call. success: function(data) { $('#my_container').html(data); // Successfully loading #mycarousel into #my_container $('#mycarousel').bind( ...

javascriptjqueryajaxtwitter-bootstrapbootstrap-carousel

CSS3 Icon: the content being placed is not consistently positioned

I'm utilizing CSS3 to create icons, and everything was going smoothly until I encountered an issue with a simple design. My goal is to have an exclamation mark centered inside a circle, but its position appears inconsistent. At times, it seems slightl ...

htmlcssinserticons

What are the techniques for integrating PHP code into JavaScript/Ajax?

I am curious about how to integrate PHP code into JavaScript/Ajax. Here is the PHP code I am working with: if ($folder = opendir('data/Tasklist/')) { while (false !== ($file = readdir($folder))) { if ($file != '.' && $ ...

javascriptphpjqueryajax

Position the Material UI Box element to the bottom of its parent container

Hello there, I've come across the following layout: <Box width="100%" height="100%" p={1}> <Box my={1} display="flex" justifyContent="center"> </ ...

cssreactjsmaterial-ui

I aim to display interconnected information from various APIs in a cohesive manner

I am working with two APIs: component.ts ngOnInit(): void { this.getQueryCountriesList().subscribe(arg => { this.countryDatas = arg; }); this.getQueryNights().subscribe(obj => { this.nightDatas = obj; }); ...

javascriptangulartypescriptapi

When I click on .toggle-menu, I want the data-target to have a toggled class and the other divs to expand

Looking to achieve a functionality where clicking on .toggle-menu will toggle a class on the specified data-target element and expand other divs accordingly. jQuery(document).ready(function() { var windowWidth = jQuery(window).width(); if (win ...

javascriptjquerycss

"Encountering errors when attempting to load partials on the server-side

Currently, I am working on creating a basic single page application using the MEAN stack. Everything was running smoothly when I was developing on localhost. However, upon uploading the code to the server, I encountered a status code 500 (Internal Server ...

javascriptangularjsnode.jsmongodbexpress

Adjusting the size of a bug while hovering over a specific div

Having recently started learning HTML & CSS, I have a question regarding creating a box that scales from 1.0 to 0.8 when hovered over with the mouse. The scaling works perfectly when hovering in the middle (0.0 to 0.8) of the box. However, when hover ...

htmlcsshover

Updating user interface dynamically based on the most recent data stream is crucial for a seamless user experience

I am facing a challenge where I need to update the indicator in the user interface based on real-time data. The requirement is that if there has been no data received in the last 30 seconds, the indicator should turn red. However, if data is received withi ...

javascriptangularjsreal-time

Please ensure that the menu is included within the HTML file

How can I include a menu from menu.html into index.html? The content of menu.html is: <li><a href="home.html">Home</a></li> <li><a href="news.html">News</a></li> In index.html, the code is: <!docty ...

javascriptjquery

Node.js assert causes mocha to hang or timeout instead of throwing an error when using assert(false)

I am facing an issue with a mocha test that I have written: describe 'sabah', → beforeEach → @sabahStrategy = _.filter(@strats, { name: 'sabah2' })[0] .strat it 'article list should be populated&ap ...

javascriptnode.jstddmocha.jshighland.js

Update the image source every 1 second with Jquery and Javascript

I've been experimenting with creating a script that dynamically changes the source of an image every two seconds based on a list. Essentially, my current approach involves using a for loop to iterate over the provided list: $(document).ready(functio ...

javascriptjquery

Adaptive scrolling backdrop

As a complete novice in HTML/CSS, I am attempting to create my portfolio. My approach is to start with the most basic elements, beginning with the background. Since my main page is a large scrollable one, I want the background to fit the screen size of the ...

htmlcssbackgroundresponsive

I am experiencing issues with the button click functionality in my Google extension

Greetings! I am currently developing a Chrome extension that will automatically redirect to my website and fill in the password. However, I am facing an issue with submitting the button click event. // Here is my manifest.json code { "name": "z", "v ...

javascriptjsonnode.jsgoogle-chromegoogle-chrome-extension

The functionality of AJAX is triggered only on the second click

On my index.html page, I'm attempting to implement a basic AJAX functionality. When clicking on an anchor tag, the text will be sent to a PHP page called data.php, which will then display the clicked page. The code is functional, but there seems to be ...

phpjqueryhtmlajax