Skip to content

Instantly share code, notes, and snippets.

View mfrancois3k's full-sized avatar

mfrancois3k

1 follower · 5 following
View GitHub Profile
@mfrancois3k
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
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
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
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
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
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
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.
@mfrancois3k
mfrancois3k / Responsive moble css
Created May 9, 2023 02:03
Responsive moble css Freemote #CSS #moble
fremoote coming soon
https://codepen.io/freemote/pen/MWoQapE?editors=1100
@font-face {
font-family: 'AdiHaus';
src: URL('https://assets.codepen.io/6060109/adihaus_regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
@mfrancois3k
mfrancois3k / Gsap Simple loading page wipe
Created April 27, 2023 05:07
Gsap Simple loading page wipe #effects #gsap #JavaScript
<body>
<!-- animation -->
<div class="animation">
<h1 class="animate">loading<span>loading</span>loading<span>loading</span></h1>
<h1 class="animate">loading<span>loading</span>loading<span>loading</span></h1>
<h1 class="animate">loading<span>loading</span>loading<span>loading</span></h1>
<h1 class="animate">loading<span>loading</span>loading<span>loading</span></h1>
<h1 class="animate">loading<span>loading</span>loading<span>loading</span></h1>
<h1 class="animate">loading<span>loading</span>loading<span>loading</span></h1>
</div>
@mfrancois3k
mfrancois3k / openai_api_config.js
Created April 19, 2023 05:09 — forked from eniodev/openai_api_config.js
This is a starter snippet for building applications powered by openAI models
// npm i openai dotenv
import { config } from 'dotenv';
config();
// OpenAI API Configuration
import { Configuration, OpenAIApi } from "openai";
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY, // Replace this with your key