mfrancois3k’s gists

mfrancois3k / barba js anim.js

Last active May 23, 2023 14:15 — forked from tamirazrab/anim.js

barba js

	const tlLeave = gsap.timeline({
	defaults: { duration: 0.75, ease: "Power2.easeOut" },
	});
	const tlEnter = gsap.timeline({
	defaults: { duration: 0.75, ease: "Power2.easeOut" },
	});

	//Make the functions for the leave and enter animations
	const leaveAnimation = (current, done) => {
	const product = current.querySelector(".image-container");

mfrancois3k / barba.js views app.js

Created May 23, 2023 08:57 — forked from glafarge/app.js

Barba.js / Transitions and views

	const barba = require('@barba/core');
	const anime = require('animejs');

	const Home = require('./views/home');
	const WhoWeAre = require('./views/whoweare');

	class App {
	init() {
	barba.init({
	transitions: [{

mfrancois3k / barba.js

Last active May 23, 2023 08:54 — forked from lukaskleinschmidt/barba.js

barba.js history direction url

mfrancois3k / barba js views.js

Created May 23, 2023 08:51 — forked from magicspon/views.js

barba.js page transitions

	import Barba from 'barba.js';
	import mud from '../loader/behaviour';
	import events from '../helpers/events';
	import { transitionEnd, css3 } from '../helpers/prefix';
	import Tweezer from 'tweezer.js';

	export const views = () => {

	const heroClassName = 'is-page-with-hero';
	const heroWithOutClassName = 'is-page-without-hero';

mfrancois3k / barba.js

Created May 23, 2023 08:50 — forked from RuslanHolovko/barba.js

Page transitions with barba.js

	// BARBA.JS INIT and Page transitions

	var ExpandTransition = Barba.BaseTransition.extend({

	start: function() {
	Promise
	.all([this.newContainerLoading, this.zoom()])
	.then(this.showNewPage.bind(this));
	},

mfrancois3k / barba js application.js

Last active May 23, 2023 08:47 — forked from infernalmaster/application.js

barba js starter

	// /app/javascript/packs/application.js
	import Barba from 'barba.js'
	import {HideShowTransition, FadeTransition} from '../barbaTransitions'

	/**
	*
	* @param {Element} conatainerElement
	*/
	function initAll(conatainerElement) {
	// initialize all js scripts inside conatainerElement

mfrancois3k / barba.js

Last active May 23, 2023 08:46 — forked from nicooprat/barba.js

Barba v2

	// Internally, do something like this

	Promise
	.all([
	this.loadNewContent,
	this.transitionOut({
	fromRoute,
	event,
	oldContainer,
	promise

mfrancois3k / 01 setup

Last active May 31, 2023 16:39

Barba js Basics #CSS #transition #effects

	set up

	put cdn for html ur using for all the html ur transitioning
	<script src="https://unpkg.com/@barba/core"></script>


	html structure

	<body data-barba="wrapper">
	<!-- put here content that will not change

mfrancois3k / css

Created May 16, 2023 03:04

freemote Deliever Status #CSS

	@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
	@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;800&display=swap');

	* {
	margin: 0;
	padding: 0;
	}
	body, html {
	min-width: 100%;
	min-height: 100vh;

mfrancois3k / explination

Last active May 16, 2023 03:01

media query css tranistion #CSS #transition

	can animate the flex-basis property using CSS transitions in a media query:

	In this example, we have a flex container with three flex items, each with a different flex-basis. When the screen width is less than or equal to 768px, the media query is triggered and we want the flex items to stack vertically. We set the flex-basis to 100% for each item, which causes them to take up the full width of the container.

	We also add an .active class to the items we want to animate. In this case, we're animating the second and third boxes to have a smaller flex-basis when the screen width is reduced. The first box remains at flex-basis: 100% because we want it to take up the full width of the container at all times.

	To animate the flex-basis property, we add a transition property to the .box class. In the media query, we then change the flex-basis property of the active boxes to the desired value, and the transition effect takes care of the rest.