grid to list view
Gsap Flip
Learn the art of creating global components, allowing you to effortlessly reuse video elements that perfectly fit and cover their containers. Harness the power of Webflow's custom elements.
GSAP Flip Change View
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/Flip.min.js"></script>
<script>
$(document).ready(function() {
$('.view_toggle').on('click', function(e) {
e.preventDefault();
var interviewList = $('.interview_list');
var interviewItems = $('.interview_item, .interview_content');
var viewMove = $('.view_move');
var viewIconList = $('.view_icon-list');
var viewIconGrid = $('.view_icon-grid');
// Fade out
gsap.to(interviewItems, {
duration: 0.25,
opacity: 0,
onComplete: function() {
// Toggle the classes for the transition
interviewList.toggleClass('is-list');
interviewItems.toggleClass('is-list');
viewMove.toggleClass('is-list');
viewIconList.toggleClass('is-list');
viewIconGrid.toggleClass('is-list');
// Fade back in
gsap.to(interviewItems, {
duration: 0.25,
opacity: 1
});
}
});
});
});
</script>
view more
Learn how to use a CSS clip-path and GSAP to create an unmasking scrolling transition.
Learn the art of creating global components, allowing you to effortlessly reuse video elements that perfectly fit and cover their containers. Harness the power of Webflow's custom elements.
Advanced GSAP scrolling text animation - tutorial coming soon.